From 7f2e6a9e489f199b453e52f69350c104335c164a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=98=E7=BB=AA=E5=A3=AE?= <2235602974@qq.com>
Date: Tue, 29 Mar 2022 19:18:05 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20DictTag=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/index.vue | 52 ++++++++++++++++++++++++++++++++
 src/main.js                      | 10 ++++--
 2 files changed, 59 insertions(+), 3 deletions(-)
 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 00000000..afe7aa82
--- /dev/null
+++ b/src/components/DictTag/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="values.includes(item.value)">
+        <span
+          v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
+          :key="item.value"
+          :index="index"
+          :class="item.raw.cssClass"
+        >{{ item.label }}
+        </span>
+        <el-tag
+          v-else
+          :disable-transitions="true"
+          :key="item.value"
+          :index="index"
+          :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
+          :class="item.raw.cssClass"
+        >
+          {{ item.label }}
+        </el-tag>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DictTag",
+  props: {
+    options: {
+      type: Array,
+      default: null,
+    },
+    value: [Number, String, Array],
+  },
+  computed: {
+    values() {
+      if (this.value !== null && typeof this.value !== 'undefined') {
+        return Array.isArray(this.value) ? this.value : [String(this.value)];
+      } else {
+        return [];
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index f05bfbf1..ef51b41e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,14 +21,17 @@ import { iconfontUrl, iconfontVersion } from "@/config/env";
 import * as filters from "./filters"; // 全局filter
 import "./styles/common.scss";
 import basicContainer from "./components/basic-container/main";
-import DictResolver from '@/components/DictResolver' // 字典数据组件
-
-DictResolver.install()
+// 字典数据组件
+import DictResolver from '@/components/DictResolver'
+// 字典标签组件
+import DictTag from '@/components/DictTag'
 
 // 挂载常用全局方法，import 引入
 Vue.prototype.validatenull = validatenull;
 Vue.prototype.downBlobFile = downBlobFile;
 
+DictResolver.install()
+
 window.axios = axios;
 Vue.use(VueAxios, axios);
 
@@ -50,6 +53,7 @@ Vue.use(AvueFormDesign);
 
 // 注册全局容器
 Vue.component("basicContainer", basicContainer);
+Vue.component('DictTag', DictTag)
 
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
-- 
Gitee