crmcard/tm-vuetify/components/tm-card/tm-card.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>