| 12345678910111213141516171819202122232425262728293031323334353637 |
- <template>
- <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]" :style="customStyle">
- <view :class="['wd-card__title-content', customTitleClass]" v-if="title || $slots.title">
- <view class="wd-card__title">
- <text v-if="title">{{ title }}</text>
- <slot v-else name="title"></slot>
- </view>
- </view>
- <view :class="`wd-card__content ${customContentClass}`">
- <slot></slot>
- </view>
- <view :class="`wd-card__footer ${customFooterClass}`" v-if="$slots.footer">
- <slot name="footer"></slot>
- </view>
- </view>
- </template>
- <script lang="ts">
- export default {
- name: 'wd-card',
- options: {
- addGlobalClass: true,
- virtualHost: true,
- styleIsolation: 'shared'
- }
- }
- </script>
- <script lang="ts" setup>
- import { cardProps } from './types'
- defineProps(cardProps)
- </script>
- <style lang="scss" scoped>
- @import './index.scss';
- </style>
|