91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<!--
|
||
组件功能： 卡片布局
|
||
标题， 副标题， 和编辑按钮及插槽。
|
||
注意： 不包含 中间的内容
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/12/06 08:06
|
||
-->
|
||
<template>
|
||
<view class="c-card-wrapper" :style="props.viewStyle">
|
||
|
||
<view v-if="props.title" class="card-title" :class="{'border-none':!isTitleBorder}" @tap="emits('clickTitle')">
|
||
<view class="c-card-title"> {{ props.title }} <view><slot name="titleRight"/> </view> </view>
|
||
<view class="sub-title" v-if="props.subtitle">{{ props.subtitle }}</view>
|
||
</view>
|
||
<!-- 默认插槽位置 -->
|
||
<slot></slot>
|
||
|
||
<!-- 编辑区域 -->
|
||
<slot name="editContent">
|
||
<view v-if="props.editText" class="card-edit flex-center" hover-class="touch-hover" @tap="emits('editTap')">
|
||
<image src="/pageDevice/static/devIconImg/icon-edit.svg" mode="scaleToFill" /> {{ props.editText }}
|
||
</view>
|
||
</slot>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onMounted, watch } from 'vue'
|
||
|
||
const emits = defineEmits(['editTap','clickTitle'])
|
||
|
||
const props = defineProps({
|
||
|
||
viewStyle: { type: [String, Object] }, // 样式透传， 小程序不支持再组件上加style(不生效)
|
||
|
||
title: { type: String }, //标题文字 传值则显示
|
||
|
||
subtitle: { type: String }, //副标题
|
||
|
||
editText: { type: String }, // 编辑文本, 若存在请通过 editTap 事件接收点击事件。
|
||
isTitleBorder:{type:Boolean, default:true} //是否存在标题下边框
|
||
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.c-card-wrapper {
|
||
margin: 0 35rpx;
|
||
border-radius: 32rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
.card-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 30rpx 40rpx;
|
||
min-height: 42rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
border-bottom: 1rpx solid #ededed;
|
||
.c-card-title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.sub-title {
|
||
margin-top: 15rpx;
|
||
font-size: 25rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
.card-edit {
|
||
height: 110rpx;
|
||
border-top: 1rpx solid #ededed;
|
||
color: #2980fd;
|
||
font-size: 33rpx;
|
||
font-weight: 400;
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.border-none{
|
||
border: none !important;
|
||
}
|
||
</style>
|