| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| e9c283 | 2 | <span :class="[prefixCls, { 'show-span': span && $slots.default }]"> |
| 2f6253 | 3 | <slot /> |
| e9c283 | 4 | <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" /> |
| 2f6253 | 5 | </span> |
| 陈 | 6 | </template> |
| 7 | <script lang="ts"> | |
| 8 | import type { PropType } from 'vue'; | |
| 9 | ||
| 10 | import { defineComponent } from 'vue'; | |
| 11 | ||
| fb0c77 | 12 | import BasicHelp from './BasicHelp.vue'; |
| 73c8e0 | 13 | import { propTypes } from '/@/utils/propTypes'; |
| e9c283 | 14 | import { useDesign } from '/@/hooks/web/useDesign'; |
| fb0c77 | 15 | |
| 2f6253 | 16 | export default defineComponent({ |
| fb0c77 | 17 | name: 'BasicTitle', |
| V | 18 | components: { BasicHelp }, |
| 2f6253 | 19 | props: { |
| 陈 | 20 | helpMessage: { |
| 21 | type: [String, Array] as PropType<string | string[]>, | |
| 22 | default: '', | |
| 23 | }, | |
| 73c8e0 | 24 | span: propTypes.bool, |
| 2f6253 | 25 | }, |
| e9c283 | 26 | setup() { |
| V | 27 | const { prefixCls } = useDesign('basic-title'); |
| 28 | return { prefixCls }; | |
| 29 | }, | |
| 2f6253 | 30 | }); |
| 陈 | 31 | </script> |
| 32 | <style lang="less" scoped> | |
| 33 | @import (reference) '../../../design/index.less'; | |
| e9c283 | 34 | @prefix-cls: ~'@{namespace}-basic-title'; |
| 2f6253 | 35 | |
| e9c283 | 36 | .@{prefix-cls} { |
| 2f6253 | 37 | position: relative; |
| 陈 | 38 | display: flex; |
| 39 | padding-left: 7px; | |
| 40 | font-size: 16px; | |
| 41 | font-weight: 700; | |
| 42 | line-height: 24px; | |
| 43 | color: @text-color-base; | |
| 44 | ||
| 45 | .unselect(); | |
| 46 | ||
| 47 | &.show-span::before { | |
| 48 | position: absolute; | |
| 49 | top: 4px; | |
| 50 | left: 0; | |
| 51 | width: 3px; | |
| 52 | height: 16px; | |
| 53 | margin-right: 4px; | |
| 54 | background: @primary-color; | |
| 55 | content: ''; | |
| 56 | } | |
| 57 | ||
| 58 | &__help { | |
| 59 | margin-left: 10px; | |
| 60 | } | |
| 61 | } | |
| 62 | </style> | |
