wd-card.vue 923 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]" :style="customStyle">
  3. <view :class="['wd-card__title-content', customTitleClass]" v-if="title || $slots.title">
  4. <view class="wd-card__title">
  5. <text v-if="title">{{ title }}</text>
  6. <slot v-else name="title"></slot>
  7. </view>
  8. </view>
  9. <view :class="`wd-card__content ${customContentClass}`">
  10. <slot></slot>
  11. </view>
  12. <view :class="`wd-card__footer ${customFooterClass}`" v-if="$slots.footer">
  13. <slot name="footer"></slot>
  14. </view>
  15. </view>
  16. </template>
  17. <script lang="ts">
  18. export default {
  19. name: 'wd-card',
  20. options: {
  21. addGlobalClass: true,
  22. virtualHost: true,
  23. styleIsolation: 'shared'
  24. }
  25. }
  26. </script>
  27. <script lang="ts" setup>
  28. import { cardProps } from './types'
  29. defineProps(cardProps)
  30. </script>
  31. <style lang="scss" scoped>
  32. @import './index.scss';
  33. </style>