Commit dbfc485bb12eaf10bbeb807a1ba3f5b1f5d82c38
1 parent
d0ad54b4
perf: dictTag
Showing
1 changed file
with
46 additions
and
39 deletions
yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
| 1 | -<script setup lang="ts"> | ||
| 2 | -import { onMounted, onUpdated, PropType, ref } from 'vue' | ||
| 3 | -import { getDictOptions, DictDataType } from '@/utils/dict' | 1 | +<script lang="tsx"> |
| 2 | +import { defineComponent, PropType, ref } from 'vue' | ||
| 4 | import { isHexColor } from '@/utils/color' | 3 | import { isHexColor } from '@/utils/color' |
| 5 | import { ElTag } from 'element-plus' | 4 | import { ElTag } from 'element-plus' |
| 6 | -const props = defineProps({ | ||
| 7 | - type: { | ||
| 8 | - type: String as PropType<string>, | ||
| 9 | - required: true | 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 | + } | ||
| 10 | }, | 18 | }, |
| 11 | - value: { | ||
| 12 | - type: [String, Number, Boolean] as PropType<string | number | boolean>, | ||
| 13 | - required: true | ||
| 14 | - } | ||
| 15 | -}) | ||
| 16 | -const dictData = ref<DictDataType>() | ||
| 17 | -const getDictObj = (dictType: string, value: string) => { | ||
| 18 | - const dictOptions = getDictOptions(dictType) | ||
| 19 | - dictOptions.forEach((dict: DictDataType) => { | ||
| 20 | - if (dict.value === value) { | ||
| 21 | - if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') { | ||
| 22 | - dict.colorType = '' | 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 + '' === 'primary' || dict.colorType + '' === 'default') { | ||
| 26 | + dict.colorType = '' | ||
| 27 | + } | ||
| 28 | + dictData.value = dict | ||
| 29 | + } | ||
| 30 | + }) | ||
| 31 | + } | ||
| 32 | + const rederDictTag = () => { | ||
| 33 | + if (!props.type) { | ||
| 34 | + return null | ||
| 23 | } | 35 | } |
| 24 | - dictData.value = dict | 36 | + getDictObj(props.type, props.value.toString()) |
| 37 | + return ( | ||
| 38 | + <ElTag | ||
| 39 | + type={dictData.value?.colorType} | ||
| 40 | + color={ | ||
| 41 | + dictData.value?.cssClass && isHexColor(dictData.value?.cssClass) | ||
| 42 | + ? dictData.value?.cssClass | ||
| 43 | + : '' | ||
| 44 | + } | ||
| 45 | + > | ||
| 46 | + {dictData.value?.label} | ||
| 47 | + </ElTag> | ||
| 48 | + ) | ||
| 25 | } | 49 | } |
| 26 | - }) | ||
| 27 | -} | ||
| 28 | - | ||
| 29 | -onMounted(() => { | ||
| 30 | - return getDictObj(props.type, props.value?.toString()) | ||
| 31 | -}) | ||
| 32 | - | ||
| 33 | -onUpdated(() => { | ||
| 34 | - getDictObj(props.type, props.value?.toString()) | 50 | + return () => rederDictTag() |
| 51 | + } | ||
| 35 | }) | 52 | }) |
| 36 | </script> | 53 | </script> |
| 37 | -<template> | ||
| 38 | - <ElTag | ||
| 39 | - :disable-transitions="true" | ||
| 40 | - :key="dictData?.value + ''" | ||
| 41 | - :type="dictData?.colorType" | ||
| 42 | - :color="dictData?.cssClass && isHexColor(dictData?.cssClass) ? dictData?.cssClass : ''" | ||
| 43 | - > | ||
| 44 | - {{ dictData?.label }} | ||
| 45 | - </ElTag> | ||
| 46 | -</template> |