37 lines
1.0 KiB
Plaintext
37 lines
1.0 KiB
Plaintext
<template>
|
||
<view :class="cardClass" :style="cardStyle">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { computed } from 'vue'
|
||
|
||
/**
|
||
* 通用卡片容器
|
||
* variant：default(默认) / list(自带列表内边距) / tight(紧凑) / danger(预警红底) / flat(无边框)
|
||
*/
|
||
const props = defineProps({
|
||
variant : { type: String, default: 'default' },
|
||
/** 自定义内边距，传空取 variant 默认值 */
|
||
padding : { type: String, default: '' },
|
||
/** 自定义外边距（底部） */
|
||
marginBottom : { type: String, default: '' }
|
||
})
|
||
|
||
const cardClass = computed(() : string => {
|
||
let c = 'hr-card'
|
||
if (props.variant == 'list') { c += ' hr-card-list' }
|
||
if (props.variant == 'danger') { c += ' hr-card-danger' }
|
||
if (props.variant == 'tight') { c += ' hr-card-tight' }
|
||
return c
|
||
})
|
||
|
||
const cardStyle = computed(() : string => {
|
||
let s = ''
|
||
if (props.padding != '') { s += `padding:${props.padding};` }
|
||
if (props.marginBottom != '') { s += `margin-bottom:${props.marginBottom};` }
|
||
return s
|
||
})
|
||
</script>
|