generated from thzxcx/vue3
51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<!--
|
|
* @Author: peerless_hero peerless_hero@outlook.com
|
|
* @Date: 2023-07-08 01:36:19
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-07-13 16:19:22
|
|
* @FilePath: \uni\packages\card\index.vue
|
|
* @Description:
|
|
*
|
|
-->
|
|
<template>
|
|
<view
|
|
class="th-card" :class="{ 'th-card-box-shadow': !noShadow }" bg-white rounded-16rpx m-24rpx max-w-702rpx
|
|
overflow-hidden
|
|
>
|
|
<view flex w-full>
|
|
<view flex-grow class="th-card-body">
|
|
<slot />
|
|
</view>
|
|
<view v-if="hasExtra" class="th-card-extra" w-128rpx m-16rpx>
|
|
<slot name="extra" />
|
|
</view>
|
|
</view>
|
|
<view v-if="noCardActions" h-16rpx />
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Card">
|
|
import { useSlots } from 'vue'
|
|
|
|
withDefaults(defineProps<{
|
|
/** 取消阴影 */
|
|
noShadow?: boolean
|
|
}>(),
|
|
{ noShadow: false },
|
|
)
|
|
|
|
/** 不存在操作栏组件时，自动增加底部的内边距 */
|
|
const noCardActions = useSlots().default().every(({ type }) =>
|
|
typeof type !== 'object' || !('name' in type) || type.name !== 'CardActions',
|
|
)
|
|
const hasExtra = useSlots().extra
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.th-card {
|
|
&.th-card-box-shadow {
|
|
box-shadow: 0px 1px 6px 0px #d8d8d880;
|
|
}
|
|
}
|
|
</style>
|