123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <template>
- <view @click="onclick" class="tm-card " :class="['mx-32', 'my-24', black_tmeme ? 'grey-darken-5' : bgColor, `round-${round}`, `shadow-${bgColor}-${shadow}`]">
- <view :class="['pa-24']">
- <view :class="[img?'flex-start':'']">
- <view v-if="img" class="flex-shrink mr-24">
- <slot name="img" :text="{data:img}">
- <tm-images :round="imgRound" :width="90" :src="img"></tm-images>
- </slot>
- </view>
- <view class="fulled">
- <view class="subtitle_wk flex-between ">
- <view v-if="subTitle" class="subtitle text-size-s text-grey">
- <slot name="subTitle" :text="{data:subTitle}">{{ subTitle }}</slot>
- </view>
- <view class="px-12"></view>
- <view v-if="statusText" class="substatus flex-shrink text px-12 py-6 text-size-xs round-6 text-weight-b" :class="[black_tmeme ? 'bk' : '', statusColor]">
- <slot name="statusText" :text="{data:statusText}">{{ statusText }}</slot>
- </view>
- </view>
- <view v-if="title" :class="[`text-size-${titleSize}`]" class=" my-16 text-weight-b text-overflow-2">
- <slot name="title" :text="{data:title}">{{ title }}</slot>
- </view>
- <view v-if="subText" class="text-size-s text-grey text-overflow-2">
- <slot name="subText" :text="{data:subText}">{{ 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:content}">
- <view selectable >{{ content }}</view>
- </slot>
- </view>
- <view class=" py-24 flex-center" v-if="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="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: {
- 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(index){
- this.$emit('action-click',index);
- },
- onclick(e){
- this.$emit('click',e);
- }
- }
- };
- </script>
- <style lang="scss" scoped></style>
|