mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,210 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user