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