You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
7.1 KiB
299 lines
7.1 KiB
<template> |
|
<view |
|
class="u-card" |
|
@tap.stop="click" |
|
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }" |
|
:style="{ |
|
borderRadius: borderRadius + 'rpx', |
|
margin: margin, |
|
boxShadow: boxShadow |
|
}" |
|
> |
|
<view |
|
v-if="showHead" |
|
class="u-card__head" |
|
:style="[{padding: padding + 'rpx'}, headStyle]" |
|
:class="{ |
|
'u-border-bottom': headBorderBottom |
|
}" |
|
@tap="headClick" |
|
> |
|
<view v-if="!$slots.head" class="u-flex u-row-between"> |
|
<view class="u-card__head--left u-flex u-line-1" v-if="title"> |
|
<image |
|
:src="thumb" |
|
class="u-card__head--left__thumb" |
|
mode="aspectfull" |
|
v-if="thumb" |
|
:style="{ |
|
height: thumbWidth + 'rpx', |
|
width: thumbWidth + 'rpx', |
|
borderRadius: thumbCircle ? '100rpx' : '6rpx' |
|
}" |
|
></image> |
|
<text |
|
class="u-card__head--left__title u-line-1" |
|
:style="{ |
|
fontSize: titleSize + 'rpx', |
|
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: subTitleSize + 'rpx', |
|
color: subTitleColor |
|
}" |
|
> |
|
{{ subTitle }} |
|
</text> |
|
</view> |
|
</view> |
|
<slot name="head" v-else /> |
|
</view> |
|
<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view> |
|
<view |
|
v-if="showFoot" |
|
class="u-card__foot" |
|
@tap="footClick" |
|
:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]" |
|
:class="{ |
|
'u-border-top': footBorderTop |
|
}" |
|
> |
|
<slot name="foot" /> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* card 卡片 |
|
* @description 卡片组件一般用于多个列表条目，且风格统一的场景 |
|
* @tutorial https://www.uviewui.com/components/card.html |
|
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false） |
|
* @property {String} title 头部左边的标题 |
|
* @property {String} title-color 标题颜色（默认#303133） |
|
* @property {String | Number} title-size 标题字体大小，单位rpx（默认30） |
|
* @property {String} sub-title 头部右边的副标题 |
|
* @property {String} sub-title-color 副标题颜色（默认#909399） |
|
* @property {String | Number} sub-title-size 副标题字体大小（默认26） |
|
* @property {Boolean} border 是否显示边框（默认true） |
|
* @property {String | Number} index 用于标识点击了第几个卡片 |
|
* @property {String} box-shadow 卡片外围阴影，字符串形式（默认none） |
|
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx） |
|
* @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16） |
|
* @property {Object} head-style 头部自定义样式，对象形式 |
|
* @property {Object} body-style 中部自定义样式，对象形式 |
|
* @property {Object} foot-style 底部自定义样式，对象形式 |
|
* @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true） |
|
* @property {Boolean} foot-border-top 是否显示底部的上边框（默认true） |
|
* @property {Boolean} show-head 是否显示头部（默认true） |
|
* @property {Boolean} show-head 是否显示尾部（默认true） |
|
* @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径 |
|
* @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60） |
|
* @property {Boolean} thumb-circle 缩略图是否为圆形（默认false） |
|
* @event {Function} click 整个卡片任意位置被点击时触发 |
|
* @event {Function} head-click 卡片头部被点击时触发 |
|
* @event {Function} body-click 卡片主体部分被点击时触发 |
|
* @event {Function} foot-click 卡片底部部分被点击时触发 |
|
* @example <u-card padding="30" title="card"></u-card> |
|
*/ |
|
export default { |
|
name: 'u-card', |
|
props: { |
|
// 与屏幕两侧是否留空隙 |
|
full: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 标题 |
|
title: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 标题颜色 |
|
titleColor: { |
|
type: String, |
|
default: '#303133' |
|
}, |
|
// 标题字体大小，单位rpx |
|
titleSize: { |
|
type: [Number, String], |
|
default: '30' |
|
}, |
|
// 副标题 |
|
subTitle: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 副标题颜色 |
|
subTitleColor: { |
|
type: String, |
|
default: '#909399' |
|
}, |
|
// 副标题字体大小，单位rpx |
|
subTitleSize: { |
|
type: [Number, String], |
|
default: '26' |
|
}, |
|
// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) |
|
border: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 用于标识点击了第几个 |
|
index: { |
|
type: [Number, String, Object], |
|
default: '' |
|
}, |
|
// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" |
|
margin: { |
|
type: String, |
|
default: '30rpx' |
|
}, |
|
// card卡片的圆角 |
|
borderRadius: { |
|
type: [Number, String], |
|
default: '16' |
|
}, |
|
// 头部自定义样式，对象形式 |
|
headStyle: { |
|
type: Object, |
|
default() { |
|
return {}; |
|
} |
|
}, |
|
// 主体自定义样式，对象形式 |
|
bodyStyle: { |
|
type: Object, |
|
default() { |
|
return {}; |
|
} |
|
}, |
|
// 底部自定义样式，对象形式 |
|
footStyle: { |
|
type: Object, |
|
default() { |
|
return {}; |
|
} |
|
}, |
|
// 头部是否下边框 |
|
headBorderBottom: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 底部是否有上边框 |
|
footBorderTop: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 标题左边的缩略图 |
|
thumb: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 缩略图宽高，单位rpx |
|
thumbWidth: { |
|
type: [String, Number], |
|
default: '60' |
|
}, |
|
// 缩略图是否为圆形 |
|
thumbCircle: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 给head，body，foot的内边距 |
|
padding: { |
|
type: [String, Number], |
|
default: '30' |
|
}, |
|
// 是否显示头部 |
|
showHead: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 是否显示尾部 |
|
showFoot: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 卡片外围阴影，字符串形式 |
|
boxShadow: { |
|
type: String, |
|
default: 'none' |
|
} |
|
}, |
|
data() { |
|
return {}; |
|
}, |
|
methods: { |
|
click() { |
|
this.$emit('click', this.index); |
|
}, |
|
headClick() { |
|
this.$emit('head-click', this.index); |
|
}, |
|
bodyClick() { |
|
this.$emit('body-click', this.index); |
|
}, |
|
footClick() { |
|
this.$emit('foot-click', this.index); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/style.components.scss"; |
|
|
|
.u-card { |
|
position: relative; |
|
overflow: hidden; |
|
font-size: 28rpx; |
|
background-color: #ffffff; |
|
box-sizing: border-box; |
|
|
|
&-full { |
|
// 如果是与屏幕之间不留空隙，应该设置左右边距为0 |
|
margin-left: 0 !important; |
|
margin-right: 0 !important; |
|
width: 100%; |
|
} |
|
|
|
&--border:after { |
|
border-radius: 16rpx; |
|
} |
|
|
|
&__head { |
|
&--left { |
|
color: $u-main-color; |
|
|
|
&__thumb { |
|
margin-right: 16rpx; |
|
} |
|
|
|
&__title { |
|
max-width: 400rpx; |
|
} |
|
} |
|
|
|
&--right { |
|
color: $u-tips-color; |
|
margin-left: 6rpx; |
|
} |
|
} |
|
|
|
&__body { |
|
color: $u-content-color; |
|
} |
|
|
|
&__foot { |
|
color: $u-tips-color; |
|
} |
|
} |
|
</style>
|
|
|