commit

src/main/resources/static/components/plugins/sysEnum/EnumTag.vue

@@ -1,17 +1,10 @@
 <template>
     <div>
-        <template v-if="mode === 'pc'" v-for="item in options">
-            <el-tag :key="item[value_key]" v-if="item[value_key] === value" v-bind="$attrs"
-                    :type="item.type"
+        <template v-for="item in options">
+            <component :key="item[value_key]" v-if="item[value_key] === value" v-bind="$attrs"
+                       :is="isMobile ? 'van-tag' : 'el-tag'" :type="item.type"
             >{{ item[label_key] }}
-            </el-tag>
-        </template>
-
-        <template v-if="mode === 'h5'" v-for="item in options">
-            <van-tag :key="item[value_key]" v-if="item[value_key] === value" v-bind="$attrs"
-                     :type="item.type">
-                {{ item[label_key] }}
-            </van-tag>
+            </component>
         </template>
     </div>
 </template>
@@ -34,14 +27,11 @@ module.exports = {
             type: String,
             default: "name"
         },
-        mode: {
-            type: String,
-            default: "pc"
-        }
     },
     data() {
         return {
-            options: []
+            options: [],
+            isMobile: true,
         }
     },
     watch: {
@@ -53,6 +43,11 @@ module.exports = {
         }
     },
     methods: {
+        isMobileDevice() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                navigator.userAgent
+            );
+        },
         getEnumOptions() {
             // // 检查数据缓存
             // if (enumCache[this.name]) {
@@ -86,7 +81,7 @@ module.exports = {
         }
     },
     created() {
-
+        this.isMobile = this.isMobileDevice()
     }
 }
 </script>
@@ -96,6 +91,28 @@ module.exports = {
     margin-left: 10px;
 }
 .van-tag {
-    padding: 4px 8px;
+    height: 24px;
+    padding: 0 8px;
+    line-height: 22px;
+}
+.van-tag--success {
+    background-color: #f0f9eb;
+    border-color: #e1f3d8;
+    color: #67c23a;
+}
+.van-tag--primary {
+    color: var(--color-primary);
+    background-color: #ecf5ff;
+    border-color: #d9ecff;
+}
+.van-tag--danger{
+    background-color: #fef0f0;
+    border-color: #fde2e2;
+    color: #f56c6c;
+}
+.van-tag--warning{
+    background-color: #fdf6ec;
+    border-color: #faecd8;
+    color: #e6a23c;
 }
 </style>