211 lines
6.3 KiB
Vue
211 lines
6.3 KiB
Vue
<template>
|
||
<view @click="onclick" class="tm-card " :class="['mx-32', 'my-24',
|
||
black_tmeme ? 'grey-darken-5' : propsAttr.bgColor, `round-${propsAttr.round}`, `shadow-${propsAttr.bgColor}-${propsAttr.shadow}`]">
|
||
<view :class="['pa-24']">
|
||
<view :class="[propsAttr.img?'flex-start':'']">
|
||
<view v-if="propsAttr.img" class="flex-shrink mr-24">
|
||
<slot name="img" :text="{data:propsAttr.img}">
|
||
<tm-images :round="propsAttr.imgRound" :width="90" :src="propsAttr.img"></tm-images>
|
||
</slot>
|
||
</view>
|
||
<view class="fulled">
|
||
<view class="subtitle_wk flex-between ">
|
||
<view v-if="propsAttr.subTitle" class="subtitle text-size-s text-grey">
|
||
<slot name="subTitle" :text="{data:propsAttr.subTitle}">{{ propsAttr.subTitle }}</slot>
|
||
</view>
|
||
<view class="px-12"></view>
|
||
<view v-if="propsAttr.statusText" class="substatus flex-shrink text px-12 py-6 text-size-xs round-6 text-weight-b" :class="[black_tmeme ? 'bk' : '', propsAttr.statusColor]">
|
||
<slot name="statusText" :text="{data:propsAttr.statusText}">{{ propsAttr.statusText }}</slot>
|
||
</view>
|
||
</view>
|
||
<view v-if="propsAttr.title" :class="[`text-size-${titleSize}`]" class=" my-16 text-weight-b text-overflow-2">
|
||
<slot name="title" :text="{data:propsAttr.title}">{{ propsAttr.title }}</slot>
|
||
</view>
|
||
<view v-if="propsAttr.subText" class="text-size-s text-grey text-overflow-2">
|
||
<slot name="subText" :text="{data:propsAttr.subText}">{{ propsAttr.subText }}</slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class=" py-24 flex-center" v-if="titleBorder">
|
||
<view class="border-t-1 fulled" :class="[black_tmeme?'bk':'']"></view>
|
||
</view>
|
||
<view class="text-size-n " :class="[black_tmeme ? 'bk' : '']">
|
||
<slot name="content" :text="{data:propsAttr.content}">
|
||
<view selectable >{{ propsAttr.content }}</view>
|
||
</slot>
|
||
</view>
|
||
<view class=" py-24 flex-center" v-if="propsAttr.actionBorder">
|
||
<view class="border-t-1 fulled" :class="[black_tmeme?'bk':'']"></view>
|
||
</view>
|
||
<view class="flex-end" :class="[black_tmeme ? 'bk' : '']" v-if="btnColorToarrays.length > 0">
|
||
<slot name="action" :action="{ btn: action, color: btnColorToarrays }">
|
||
<view v-for="(item, index) in action" @click.stop="actionClick(item, index)" :key="index" class="d-inline-block">
|
||
<tm-button :round="propsAttr.actionRound" :theme="btnColorToarrays[index]" :key="index" :black="black_tmeme" size="m">
|
||
{{ item }}
|
||
</tm-button>
|
||
</view>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 卡片
|
||
* @param {String} title-size= [xxs|s|n|g|lg|xl] 默认：g，对应的文本尺寸:xxs,xs,s,n,g,lg,xl
|
||
* @param {String} img= [] 默认：''，头像图片地址。
|
||
* @param {Number} imgRound= [] 默认：4，头像圆角
|
||
* @param {Number} round= [] 默认：4，卡片圆角
|
||
* @param {Number} shadow= [] 默认：4，卡片投影
|
||
* @param {Array|String} btnColor= [] 默认：white，按钮颜色，可以是string,或者数组['white,'red']按钮组就会依次使用该颜色，如只是一颜色，第一个使用，后面的使用默认的white.
|
||
* @param {Array} action= [] 默认：[]，操作按钮组
|
||
* @param {Number} action-round= [] 默认：2，操作按钮组的圆角，
|
||
* @param {Boolean} action-border= [] 默认：true，是否显示操作按钮上方的边线
|
||
* @param {String} status-color= [] 默认：black，卡片右上角状态文件的主题色
|
||
* @param {String} status-text= [] 默认：''，卡片右上角状态文本
|
||
* @param {String} sub-title= [] 默认：''，卡片左上角的卡片名称
|
||
* @param {String} title= [] 默认：''，标题
|
||
* @param {String} sub-text= [] 默认：''，副标题
|
||
* @param {Boolean} title-border= [] 默认：true，标题下方的边线。
|
||
* @param {String} content= [] 默认：''，卡片的正方内容
|
||
* @param {Boolean} black= [] 默认：null，是否暗黑
|
||
* @param {String} bg-color= [] 默认：'white'，卡片的背景色
|
||
* @param {Function} click 点击卡片触发的事件
|
||
* @param {Function} action-click 点击按钮组触发的事件
|
||
* @example <tm-card title="简单示例" content="内容" :action="['操作按钮']"></tm-card>
|
||
*/
|
||
|
||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||
export default {
|
||
name: 'tm-card',
|
||
components: { tmButton },
|
||
props: {
|
||
img:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
imgRound:{
|
||
type:Number | String,
|
||
default:4
|
||
},
|
||
//卡片的圆角
|
||
round: {
|
||
type: Number | String,
|
||
default: 4
|
||
},
|
||
shadow: {
|
||
type: Number | String,
|
||
default: 4
|
||
},
|
||
btnColor: {
|
||
type: Array | String,
|
||
default: () => 'white'
|
||
},
|
||
|
||
action: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
actionRound: {
|
||
type: Number | String,
|
||
default: 2
|
||
},
|
||
|
||
actionBorder:{
|
||
type:Boolean|String,
|
||
default:true
|
||
},
|
||
statusColor: {
|
||
type: String,
|
||
default: 'black'
|
||
},
|
||
statusText: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//卡片名称
|
||
subTitle: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//标题
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
titleSize: {
|
||
type: String,
|
||
default: 'g'
|
||
},
|
||
titleBorder:{
|
||
type:Boolean|String,
|
||
default:true
|
||
},
|
||
//标题介绍
|
||
subText: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
content: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
black: {
|
||
type: Boolean | String,
|
||
default: null
|
||
},
|
||
|
||
bgColor: {
|
||
type: String,
|
||
default: 'white'
|
||
}
|
||
},
|
||
computed: {
|
||
propsAttr:function(){
|
||
return {
|
||
bgColor:this.bgColor,
|
||
statusColor:this.statusColor,
|
||
title:this.title,
|
||
subTitle:this.subTitle,
|
||
content:this.content,
|
||
actionRound:this.actionRound,
|
||
actionBorder:this.actionBorder,
|
||
round:this.round,
|
||
shadow:this.shadow,
|
||
img:this.img,
|
||
}
|
||
},
|
||
black_tmeme: function() {
|
||
if (this.black !== null) return this.black;
|
||
return this.$tm.vx.state().tmVuetify.black;
|
||
},
|
||
btnColorToarrays: function() {
|
||
let al = this.action.length;
|
||
if (this.action.length == 0 || !this.action) return [];
|
||
let colors = this.btnColor;
|
||
colors = Array.isArray(colors) ? colors : [colors];
|
||
for (let i = 0; i < al; i++) {
|
||
if (!colors[i]) {
|
||
colors.push('white');
|
||
}
|
||
}
|
||
return colors;
|
||
}
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
methods:{
|
||
actionClick(item,index){
|
||
this.$emit('action-click',index);
|
||
},
|
||
onclick(e){
|
||
this.$emit('click',e);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|