BJ_ZTEITS-Developers / parking-cloud-yudao

Commit dbfc485bb12eaf10bbeb807a1ba3f5b1f5d82c38

Authored by xingyu
1 parent d0ad54b4

perf: dictTag

Inline Side-by-side
Showing 1 changed file with 46 additions and 39 deletions
yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
  View file @dbfc485
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 3 import { isHexColor } from '@/utils/color'
5 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 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>
... ...