From 4b292b8a744508b5074ca6fe9812c512a5e67ec4 Mon Sep 17 00:00:00 2001
From: lai <10633968+laiyujun1@user.noreply.gitee.com>
Date: Mon, 30 Dec 2024 16:46:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E7=BB=AD=E4=B8=8E=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E5=8D=8F=E5=95=86=E5=A2=9E=E5=8A=A0=E6=A0=87=E7=AD=BE=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/index.vue | 55 ++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/DictTag/index.vue

diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
new file mode 100644
index 0000000..9455039
--- /dev/null
+++ b/src/components/DictTag/index.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, PropType } from 'vue';
+const props = defineProps({
+  /**数据 */
+  options: {
+    type: Array as PropType<DictType[]>,
+  },
+  /**当前的值对应数据中的项字段 */
+  valueField: {
+    type: String as PropType<keyof DictType>,
+    default: 'value',
+  },
+  /**当前的值 */
+  value: {
+    type: [Number, String],
+    default: '',
+  },
+  /**数据默认值，当前值不存在时 */
+  valueDefault: {
+    type: [Number, String],
+  },
+});
+
+/**遍历找到对应值数据项 */
+const item = computed(() => {
+  console.log(props.options);
+  if (Array.isArray(props.options) && props.options.length > 0) {
+    let option = props.options.find(
+      item => `${item[props.valueField]}` === `${props.value}`
+    );
+    // 数据默认值
+    if (!option && props.valueDefault != undefined) {
+      option = props.options.find(
+        item => `${item[props.valueField]}` === `${props.valueDefault}`
+      );
+    }
+    return option;
+  }
+  return undefined;
+});
+</script>
+
+<template>
+  <template v-if="item">
+    <a-tag v-if="item.tagType" :class="!item.tagClass?'':item.tagClass" :color="!item.tagType?'':item.tagType">
+      {{ item.label }}
+    </a-tag>
+    <a-tag v-else :class="!item.tagClass?'':item.tagClass">
+      {{ item.label }}
+    </a-tag>
+  </template>
+  <span v-else>{{ value }}</span>
+</template>
+
+<style lang="less" scoped></style>