1
This commit is contained in:
@@ -0,0 +1,124 @@
|
||||
export default {
|
||||
props: {
|
||||
// 与屏幕两侧是否留空隙
|
||||
full: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.full
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.title
|
||||
},
|
||||
// 标题颜色
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.titleColor
|
||||
},
|
||||
// 标题字体大小，单位rpx
|
||||
titleSize: {
|
||||
type: [Number, String],
|
||||
default: ()=> uni.$u.props.card.titleSize
|
||||
},
|
||||
// 副标题
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.subTitle
|
||||
},
|
||||
// 副标题颜色
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.subTitleColor
|
||||
},
|
||||
// 副标题字体大小，单位rpx
|
||||
subTitleSize: {
|
||||
type: [Number, String],
|
||||
default: ()=> uni.$u.props.card.subTitleSize
|
||||
},
|
||||
// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.border
|
||||
},
|
||||
// 用于标识点击了第几个
|
||||
index: {
|
||||
type: [Number, String, Object],
|
||||
default: ()=> uni.$u.props.card.index
|
||||
},
|
||||
// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
|
||||
margin: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.margin
|
||||
},
|
||||
// card卡片的圆角
|
||||
round: {
|
||||
type: [Number, String],
|
||||
default: ()=> uni.$u.props.card.round
|
||||
},
|
||||
// 头部自定义样式，对象形式
|
||||
headStyle: {
|
||||
type: Object,
|
||||
default: ()=> uni.$u.props.card.headStyle
|
||||
},
|
||||
// 主体自定义样式，对象形式
|
||||
bodyStyle: {
|
||||
type: Object,
|
||||
default: ()=> uni.$u.props.card.bodyStyle
|
||||
},
|
||||
// 底部自定义样式，对象形式
|
||||
footStyle: {
|
||||
type: Object,
|
||||
default: ()=> uni.$u.props.card.footStyle
|
||||
},
|
||||
// 头部是否下边框
|
||||
headBorderBottom: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.headBorderBottom
|
||||
},
|
||||
// 底部是否有上边框
|
||||
footBorderTop: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.footBorderTop
|
||||
},
|
||||
// 标题左边的缩略图
|
||||
thumb: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.thumb
|
||||
},
|
||||
// 缩略图宽高，单位rpx
|
||||
thumbWidth: {
|
||||
type: [String, Number],
|
||||
default: ()=> uni.$u.props.card.thumbWidth
|
||||
},
|
||||
// 缩略图是否为圆形
|
||||
thumbCircle: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.thumbCircle
|
||||
},
|
||||
// 缩略图圆角值
|
||||
thumbRadius: {
|
||||
type: [String, Number],
|
||||
default: ()=> uni.$u.props.card.thumbRadius
|
||||
},
|
||||
// 给head，body，foot的内边距
|
||||
padding: {
|
||||
type: [String, Number],
|
||||
default: ()=> uni.$u.props.card.padding
|
||||
},
|
||||
// 是否显示头部
|
||||
showHead: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.showHead
|
||||
},
|
||||
// 是否显示尾部
|
||||
showFoot: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.card.showFoot
|
||||
},
|
||||
// 卡片外围阴影，字符串形式
|
||||
boxShadow: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.card.boxShadow
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-card"
|
||||
@tap.stop="click"
|
||||
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': round > 0 }"
|
||||
:style="{
|
||||
borderRadius: $u.addUnit(round),
|
||||
margin: margin,
|
||||
boxShadow: boxShadow
|
||||
}"
|
||||
>
|
||||
<view
|
||||
v-if="showHead"
|
||||
class="u-card__head"
|
||||
:style="[{padding: $u.addUnit(padding)}, headStyle]"
|
||||
:class="{
|
||||
'u-border-bottom': headBorderBottom
|
||||
}"
|
||||
@tap="headClick"
|
||||
>
|
||||
<slot name="head">
|
||||
<view class="u-card__head--left" v-if="title">
|
||||
<image
|
||||
:src="thumb"
|
||||
class="u-card__head--left__thumb"
|
||||
mode="aspectFill"
|
||||
v-if="thumb"
|
||||
:style="{
|
||||
height: $u.addUnit(thumbWidth),
|
||||
width: $u.addUnit(thumbWidth),
|
||||
borderRadius: thumbCircle ? '50px' : $u.addUnit(thumbRadius)
|
||||
}"
|
||||
></image>
|
||||
<text
|
||||
class="u-card__head--left__title"
|
||||
:style="{
|
||||
fontSize: $u.addUnit(titleSize),
|
||||
color: titleColor
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="u-card__head--right u-line-1" v-if="subTitle">
|
||||
<text
|
||||
class="u-card__head__title__text"
|
||||
:style="{
|
||||
fontSize: $u.addUnit(subTitleSize),
|
||||
color: subTitleColor
|
||||
}"
|
||||
>
|
||||
{{ subTitle }}
|
||||
</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view @tap="bodyClick" class="u-card__body" :style="[{padding: $u.addUnit(padding)}, bodyStyle]">
|
||||
<slot name="body" />
|
||||
</view>
|
||||
<view
|
||||
v-if="showFoot"
|
||||
class="u-card__foot"
|
||||
@tap="footClick"
|
||||
:style="[{padding: $slots.foot ? $u.addUnit(padding) : 0}, footStyle]"
|
||||
:class="{
|
||||
'u-border-top': footBorderTop
|
||||
}"
|
||||
>
|
||||
<slot name="foot" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import props from './props.js';
|
||||
import mixin from '../../libs/mixin/mixin'
|
||||
import mpMixin from '../../libs/mixin/mpMixin'
|
||||
|
||||
/**
|
||||
* card 卡片
|
||||
* @description 卡片组件一般用于多个列表条目，且风格统一的场景
|
||||
* @tutorial https://uview.d3u.cn/components/card.html
|
||||
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
|
||||
* @property {String} title 头部左边的标题
|
||||
* @property {String} titleColor 标题颜色（默认#303133）
|
||||
* @property {String | Number} titleSize 标题字体大小，单位rpx（默认30）
|
||||
* @property {String} subTitle 头部右边的副标题
|
||||
* @property {String} subTitleColor 副标题颜色（默认#909399）
|
||||
* @property {String | Number} subTitleSize 副标题字体大小（默认26）
|
||||
* @property {Boolean} border 是否显示边框（默认true）
|
||||
* @property {String | Number} index 用于标识点击了第几个卡片
|
||||
* @property {String} boxShadow 卡片外围阴影，字符串形式（默认none）
|
||||
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
|
||||
* @property {String | Number} round 卡片整体的圆角值，单位rpx（默认16）
|
||||
* @property {Object} headStyle 头部自定义样式，对象形式
|
||||
* @property {Object} bodyStyle 中部自定义样式，对象形式
|
||||
* @property {Object} footStyle 底部自定义样式，对象形式
|
||||
* @property {Boolean} headBorderBottom 是否显示头部的下边框（默认true）
|
||||
* @property {Boolean} footBorderTop 是否显示底部的上边框（默认true）
|
||||
* @property {Boolean} showHead 是否显示头部（默认true）
|
||||
* @property {Boolean} showFoot 是否显示尾部（默认true）
|
||||
* @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
|
||||
* @property {String | Number} thumbWidth 缩略图的宽度，高等于宽，单位rpx（默认60）
|
||||
* @property {Boolean} thumbCircle 缩略图是否为圆形（默认false）
|
||||
* @event {Function} click 整个卡片任意位置被点击时触发
|
||||
* @event {Function} headClick 卡片头部被点击时触发
|
||||
* @event {Function} bodyClick 卡片主体部分被点击时触发
|
||||
* @event {Function} footClick 卡片底部部分被点击时触发
|
||||
* @example <u-card padding="30" title="card"></u-card>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-card',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
// #ifdef VUE3
|
||||
emits: ["click","headClick","bodyClick","footClick"],
|
||||
// #endif
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('click', this.index);
|
||||
},
|
||||
headClick() {
|
||||
this.$emit('headClick', this.index);
|
||||
},
|
||||
bodyClick() {
|
||||
this.$emit('bodyClick', this.index);
|
||||
},
|
||||
footClick() {
|
||||
this.$emit('footClick', this.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
background-color: #ffffff;
|
||||
|
||||
&-full {
|
||||
// 如果是与屏幕之间不留空隙，应该设置左右边距为0
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--border:after {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__head {
|
||||
@include flex();
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&--left {
|
||||
@include flex();
|
||||
align-items: center;
|
||||
color: $u-main-color;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
&__thumb {
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
color: $u-tips-color;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
&__foot {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user