perf: dictTag

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

@@ -1,9 +1,12 @@
-<script setup lang="ts">
+<script lang="tsx">
-import { onMounted, onUpdated, PropType, ref } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
-import { getDictOptions, DictDataType } from '@/utils/dict'
 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,7 +15,8 @@ const props = defineProps({
       type: [String, Number, Boolean] as PropType<string | number | boolean>,
       required: true
     }
-})
+  },
+  setup(props) {
     const dictData = ref<DictDataType>()
     const getDictObj = (dictType: string, value: string) => {
       const dictOptions = getDictOptions(dictType)
@@ -25,22 +29,25 @@ const getDictObj = (dictType: string, value: string) => {
         }
       })
     }
-
+    const rederDictTag = () => {
-onMounted(() => {
+      if (!props.type) {
-  return getDictObj(props.type, props.value?.toString())
+        return null
-})
+      }
-
+      getDictObj(props.type, props.value.toString())
-onUpdated(() => {
+      return (
-  getDictObj(props.type, props.value?.toString())
+        <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>