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.
270 lines
6.2 KiB
270 lines
6.2 KiB
<template> |
|
<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}" |
|
:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}"> |
|
<!-- 封面 --> |
|
<slot name="cover"> |
|
<view v-if="cover" class="uni-card__cover"> |
|
<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image> |
|
</view> |
|
</slot> |
|
<slot name="title"> |
|
<view v-if="title || extra" class="uni-card__header"> |
|
<!-- 卡片标题 --> |
|
<view class="uni-card__header-box" @click="onClick('title')"> |
|
<view v-if="thumbnail" class="uni-card__header-avatar"> |
|
<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" /> |
|
</view> |
|
<view class="uni-card__header-content"> |
|
<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text> |
|
<text v-if="title&&subTitle" |
|
class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text> |
|
</view> |
|
</view> |
|
<view class="uni-card__header-extra" @click="onClick('extra')"> |
|
<text class="uni-card__header-extra-text">{{ extra }}</text> |
|
</view> |
|
</view> |
|
</slot> |
|
<!-- 卡片内容 --> |
|
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')"> |
|
<slot></slot> |
|
</view> |
|
<view class="uni-card__actions" @click="onClick('actions')"> |
|
<slot name="actions"></slot> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* Card 卡片 |
|
* @description 卡片视图组件 |
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=22 |
|
* @property {String} title 标题文字 |
|
* @property {String} subTitle 副标题 |
|
* @property {Number} padding 内容内边距 |
|
* @property {Number} margin 卡片外边距 |
|
* @property {Number} spacing 卡片内边距 |
|
* @property {String} extra 标题额外信息 |
|
* @property {String} cover 封面图（本地路径需要引入） |
|
* @property {String} thumbnail 标题左侧缩略图 |
|
* @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值 |
|
* @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影 |
|
* @property {String} shadow 卡片阴影 |
|
* @property {Boolean} border 卡片边框 |
|
* @event {Function} click 点击 Card 触发事件 |
|
*/ |
|
export default { |
|
name: 'UniCard', |
|
emits: ['click'], |
|
props: { |
|
title: { |
|
type: String, |
|
default: '' |
|
}, |
|
subTitle: { |
|
type: String, |
|
default: '' |
|
}, |
|
padding: { |
|
type: String, |
|
default: '10px' |
|
}, |
|
margin: { |
|
type: String, |
|
default: '15px' |
|
}, |
|
spacing: { |
|
type: String, |
|
default: '0 10px' |
|
}, |
|
extra: { |
|
type: String, |
|
default: '' |
|
}, |
|
cover: { |
|
type: String, |
|
default: '' |
|
}, |
|
thumbnail: { |
|
type: String, |
|
default: '' |
|
}, |
|
isFull: { |
|
// 内容区域是否通栏 |
|
type: Boolean, |
|
default: false |
|
}, |
|
isShadow: { |
|
// 是否开启阴影 |
|
type: Boolean, |
|
default: true |
|
}, |
|
shadow: { |
|
type: String, |
|
default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)' |
|
}, |
|
border: { |
|
type: Boolean, |
|
default: true |
|
} |
|
}, |
|
methods: { |
|
onClick(type) { |
|
this.$emit('click', type) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
$uni-border-3: #EBEEF5 !default; |
|
$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
|
$uni-main-color: #3a3a3a !default; |
|
$uni-base-color: #6a6a6a !default; |
|
$uni-secondary-color: #909399 !default; |
|
$uni-spacing-sm: 8px !default; |
|
$uni-border-color:$uni-border-3; |
|
$uni-shadow: $uni-shadow-base; |
|
$uni-card-title: 15px; |
|
$uni-cart-title-color:$uni-main-color; |
|
$uni-card-subtitle: 12px; |
|
$uni-cart-subtitle-color:$uni-secondary-color; |
|
$uni-card-spacing: 10px; |
|
$uni-card-content-color: $uni-base-color; |
|
|
|
.uni-card { |
|
margin: $uni-card-spacing; |
|
padding: 0 $uni-spacing-sm; |
|
border-radius: 4px; |
|
overflow: hidden; |
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; |
|
background-color: #fff; |
|
flex: 1; |
|
|
|
.uni-card__cover { |
|
position: relative; |
|
margin-top: $uni-card-spacing; |
|
flex-direction: row; |
|
overflow: hidden; |
|
border-radius: 4px; |
|
.uni-card__cover-image { |
|
flex: 1; |
|
// width: 100%; |
|
/* #ifndef APP-PLUS */ |
|
vertical-align: middle; |
|
/* #endif */ |
|
} |
|
} |
|
|
|
.uni-card__header { |
|
display: flex; |
|
border-bottom: 1px $uni-border-color solid; |
|
flex-direction: row; |
|
align-items: center; |
|
padding: $uni-card-spacing; |
|
overflow: hidden; |
|
|
|
.uni-card__header-box { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex: 1; |
|
flex-direction: row; |
|
align-items: center; |
|
overflow: hidden; |
|
} |
|
|
|
.uni-card__header-avatar { |
|
width: 40px; |
|
height: 40px; |
|
overflow: hidden; |
|
border-radius: 5px; |
|
margin-right: $uni-card-spacing; |
|
.uni-card__header-avatar-image { |
|
flex: 1; |
|
width: 40px; |
|
height: 40px; |
|
} |
|
} |
|
|
|
.uni-card__header-content { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: column; |
|
justify-content: center; |
|
flex: 1; |
|
// height: 40px; |
|
overflow: hidden; |
|
|
|
.uni-card__header-content-title { |
|
font-size: $uni-card-title; |
|
color: $uni-cart-title-color; |
|
// line-height: 22px; |
|
} |
|
|
|
.uni-card__header-content-subtitle { |
|
font-size: $uni-card-subtitle; |
|
margin-top: 5px; |
|
color: $uni-cart-subtitle-color; |
|
} |
|
} |
|
|
|
.uni-card__header-extra { |
|
line-height: 12px; |
|
|
|
.uni-card__header-extra-text { |
|
font-size: 12px; |
|
color: $uni-cart-subtitle-color; |
|
} |
|
} |
|
} |
|
|
|
.uni-card__content { |
|
padding: $uni-card-spacing; |
|
font-size: 14px; |
|
color: $uni-card-content-color; |
|
line-height: 22px; |
|
} |
|
|
|
.uni-card__actions { |
|
font-size: 12px; |
|
} |
|
} |
|
|
|
.uni-card--border { |
|
border: 1px solid $uni-border-color; |
|
} |
|
|
|
.uni-card--shadow { |
|
position: relative; |
|
/* #ifndef APP-NVUE */ |
|
box-shadow: $uni-shadow; |
|
/* #endif */ |
|
} |
|
|
|
.uni-card--full { |
|
margin: 0; |
|
border-left-width: 0; |
|
border-left-width: 0; |
|
border-radius: 0; |
|
} |
|
|
|
/* #ifndef APP-NVUE */ |
|
.uni-card--full:after { |
|
border-radius: 0; |
|
} |
|
|
|
/* #endif */ |
|
.uni-ellipsis { |
|
/* #ifndef APP-NVUE */ |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
/* #endif */ |
|
/* #ifdef APP-NVUE */ |
|
lines: 1; |
|
/* #endif */ |
|
} |
|
</style>
|
|
|