perf: dictTag

yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue

@@ -1,9 +1,12 @@
-<script setup lang="ts">
-import { onMounted, onUpdated, PropType, ref } from 'vue'
-import { getDictOptions, DictDataType } from '@/utils/dict'
+<script lang="tsx">
+import { defineComponent, PropType, ref } from 'vue'
 import { isHexColor } from '@/utils/color'
 import { ElTag } from 'element-plus'
-const props = defineProps({
+import { DictDataType, getDictOptions } from '@/utils/dict'
+
+export default defineComponent({
+  name: 'DictTag',
+  props: {
     type: {
       type: String as PropType<string>,
       required: true
@@ -12,9 +15,10 @@ const props = defineProps({
       type: [String, Number, Boolean] as PropType<string | number | boolean>,
       required: true
     }
-})
-const dictData = ref<DictDataType>()
-const getDictObj = (dictType: string, value: string) => {
+  },
+  setup(props) {
+    const dictData = ref<DictDataType>()
+    const getDictObj = (dictType: string, value: string) => {
       const dictOptions = getDictOptions(dictType)
       dictOptions.forEach((dict: DictDataType) => {
         if (dict.value === value) {
@@ -24,23 +28,26 @@ const getDictObj = (dictType: string, value: string) => {
           dictData.value = dict
         }
       })
-}
-
-onMounted(() => {
-  return getDictObj(props.type, props.value?.toString())
-})
-
-onUpdated(() => {
-  getDictObj(props.type, props.value?.toString())
+    }
+    const rederDictTag = () => {
+      if (!props.type) {
+        return null
+      }
+      getDictObj(props.type, props.value.toString())
+      return (
+        <ElTag
+          type={dictData.value?.colorType}
+          color={
+            dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
+              ? dictData.value?.cssClass
+              : ''
+          }
+        >
+          {dictData.value?.label}
+        </ElTag>
+      )
+    }
+    return () => rederDictTag()
+  }
 })
 </script>
-<template>
-  <ElTag
-    :disable-transitions="true"
-    :key="dictData?.value + ''"
-    :type="dictData?.colorType"
-    :color="dictData?.cssClass && isHexColor(dictData?.cssClass) ? dictData?.cssClass : ''"
-  >
-    {{ dictData?.label }}
-  </ElTag>
-</template>