65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<view :class="['my-card', customClass]" :style="cardStyle">
|
||
|
|
<!-- 标题 -->
|
||
|
|
<view v-if="title" class="my-card__header">
|
||
|
|
{{ title }}
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 内容 -->
|
||
|
|
<view class="my-card__body">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'mycard',
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
margin: { // 外边距
|
||
|
|
type: String,
|
||
|
|
default: '20rpx'
|
||
|
|
},
|
||
|
|
borderRadius: { // 圆角
|
||
|
|
type: String,
|
||
|
|
default: '12rpx'
|
||
|
|
},
|
||
|
|
shadow: { // 是否显示阴影
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
customClass: { // 自定义类名
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
cardStyle() {
|
||
|
|
return {
|
||
|
|
margin: this.margin,
|
||
|
|
borderRadius: this.borderRadius,
|
||
|
|
boxShadow: this.shadow ? '0 4rpx 10rpx rgba(0,0,0,0.05)' : 'none',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
overflow: 'hidden'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.my-card__header {
|
||
|
|
padding: 20rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.my-card__body {
|
||
|
|
padding: 20rpx;
|
||
|
|
}
|
||
|
|
</style>
|