| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="tsx"> |
| H | 2 | import { defineComponent, PropType, ref } from 'vue' |
| 3 | import { isHexColor } from '@/utils/color' | |
| 4 | import { ElTag } from 'element-plus' | |
| 5 | import { DictDataType, getDictOptions } from '@/utils/dict' | |
| 6 | ||
| 7 | export default defineComponent({ | |
| 8 | name: 'DictTag', | |
| 9 | props: { | |
| 10 | type: { | |
| 11 | type: String as PropType<string>, | |
| 12 | required: true | |
| 13 | }, | |
| 14 | value: { | |
| 15 | type: [String, Number, Boolean] as PropType<string | number | boolean>, | |
| 16 | required: true | |
| 17 | } | |
| 18 | }, | |
| 19 | setup(props) { | |
| 20 | const dictData = ref<DictDataType>() | |
| 21 | const getDictObj = (dictType: string, value: string) => { | |
| 22 | const dictOptions = getDictOptions(dictType) | |
| 23 | dictOptions.forEach((dict: DictDataType) => { | |
| 24 | if (dict.value === value) { | |
| 25 | if (dict.colorType + '' === 'default') { | |
| 26 | dict.colorType = 'info' | |
| 27 | } | |
| 28 | dictData.value = dict | |
| 29 | } | |
| 30 | }) | |
| 31 | } | |
| 32 | const rederDictTag = () => { | |
| 33 | if (!props.type) { | |
| 34 | return null | |
| 35 | } | |
| 36 | // 解决自定义字典标签值为零时标签不渲染的问题 | |
| 37 | if (props.value === undefined || props.value === null) { | |
| 38 | return null | |
| 39 | } | |
| 40 | getDictObj(props.type, props.value.toString()) | |
| 41 | // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题 | |
| 42 | return ( | |
| 43 | <ElTag | |
| 44 | style={dictData.value?.cssClass ? 'color: #fff' : ''} | |
| 45 | type={dictData.value?.colorType} | |
| 46 | color={ | |
| 47 | dictData.value?.cssClass && isHexColor(dictData.value?.cssClass) | |
| 48 | ? dictData.value?.cssClass | |
| 49 | : '' | |
| 50 | } | |
| 51 | disableTransitions={true} | |
| 52 | > | |
| 53 | {dictData.value?.label} | |
| 54 | </ElTag> | |
| 55 | ) | |
| 56 | } | |
| 57 | return () => rederDictTag() | |
| 58 | } | |
| 59 | }) | |
| 60 | </script> | |
