perf: dictTag

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

@@ -1,46 +1,53 @@
-<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({
-  type: {
-    type: String as PropType<string>,
-    required: true
+import { DictDataType, getDictOptions } from '@/utils/dict'
+
+export default defineComponent({
+  name: 'DictTag',
+  props: {
+    type: {
+      type: String as PropType<string>,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      required: true
+    }
   },
-  value: {
-    type: [String, Number, Boolean] as PropType<string | number | boolean>,
-    required: true
-  }
-})
-const dictData = ref<DictDataType>()
-const getDictObj = (dictType: string, value: string) => {
-  const dictOptions = getDictOptions(dictType)
-  dictOptions.forEach((dict: DictDataType) => {
-    if (dict.value === value) {
-      if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
-        dict.colorType = ''
+  setup(props) {
+    const dictData = ref<DictDataType>()
+    const getDictObj = (dictType: string, value: string) => {
+      const dictOptions = getDictOptions(dictType)
+      dictOptions.forEach((dict: DictDataType) => {
+        if (dict.value === value) {
+          if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+            dict.colorType = ''
+          }
+          dictData.value = dict
+        }
+      })
+    }
+    const rederDictTag = () => {
+      if (!props.type) {
+        return null
       }
-      dictData.value = dict
+      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>
+      )
     }
-  })
-}
-
-onMounted(() => {
-  return getDictObj(props.type, props.value?.toString())
-})
-
-onUpdated(() => {
-  getDictObj(props.type, props.value?.toString())
+    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>