formTitle.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div class="form-title">
  3. <span class="form-title__icon">
  4. <slot name="icon">
  5. <SvgIcon class="icon" size="18" :name="icon" />
  6. </slot>
  7. </span>
  8. <span class="form-title__text ml-5px">
  9. <slot name="title">
  10. {{ title }}
  11. </slot>
  12. </span>
  13. </div>
  14. </template>
  15. <script setup lang="ts">
  16. // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
  17. import { SvgIcon } from '/@/components/Icon';
  18. withDefaults(
  19. defineProps<{
  20. /** 标题,可用 slot */
  21. title?: string | number;
  22. /** 标题前缀图标,用法参考 SvgIcon,可用 slot */
  23. icon?: string;
  24. }>(),
  25. {
  26. title: '',
  27. icon: '',
  28. }
  29. );
  30. </script>
  31. <style lang="less" scoped>
  32. .form-title {
  33. background-image: url('@/assets/images/vent/home/form-title.png');
  34. background-repeat: no-repeat;
  35. background-position: left center;
  36. background-size: auto 100%;
  37. height: 40px;
  38. line-height: 40px;
  39. margin-bottom: 20px;
  40. }
  41. .form-title__text {
  42. font-size: 18px;
  43. }
  44. </style>