任务

components/page/state.vue

 <template>
   <div class="ib" @click="showLife">
     <div class="ib" v-if="!isMore">
-      <span v-if="type=='text'" :style="style">{{name}}</span>
-      <Tag v-if="type=='tag'" :color="tagcolor">{{name}}</Tag>
-      <Badge v-if="type=='dot'" :color="tagcolor" :text="name" />
-      <Icon v-if="type=='icon'" :type="item.icon" :color="tagcolor" :title="name" size="24" />
+      <span v-if="type == 'text'" :style="style">{{ name }}</span>
+      <Tag v-if="type == 'tag'" :color="tagcolor">{{ name }}</Tag>
+      <Badge v-if="type == 'dot'" :color="tagcolor" :text="name" />
+      <Icon
+        v-if="type == 'icon'"
+        :type="item.icon"
+        :color="tagcolor"
+        :title="name"
+        :size="size"
+      />
     </div>
-    <div class="ib" v-else v-for="(li,i) in items" :key="i">
-      <span v-if="type=='text'" :style="li.style">{{li.name}}</span>
-      <Tag v-if="type=='tag'" :color="li.tagcolor">{{li.name}}</Tag>
-      <Badge v-if="type=='dot'" :color="li.tagcolor" :text="li.name" />&nbsp;
+    <div class="ib" v-else v-for="(li, i) in items" :key="i">
+      <span v-if="type == 'text'" :style="li.style">{{ li.name }}</span>
+      <Tag v-if="type == 'tag'" :color="li.tagcolor">{{ li.name }}</Tag>
+      <Badge v-if="type == 'dot'" :color="li.tagcolor" :text="li.name" />&nbsp;
     </div>
-    <Modal v-model="modal" title="生命周期" width="800" footer-hide :mask-closable="false">
-        <component :is="detail" :code="code" :value="value" :mode="mode" />
+    <Modal
+      v-model="modal"
+      title="生命周期"
+      width="800"
+      footer-hide
+      :mask-closable="false"
+    >
+      <component :is="detail" :code="code" :value="value" :mode="mode" />
     </Modal>
   </div>
 </template>
@@ -21,48 +33,52 @@ export default {
   name: "state",
   data() {
     return {
-      mode:'0',
+      mode: "0",
       name: "",
       isMore: false,
-      modal:false,
+      modal: false,
       item: {},
       items: [],
       data: [],
-      detail:null,
+      detail: null,
     };
   },
   props: {
     default: {
       type: String,
-      default: ""
+      default: "",
     },
     type: {
       type: String,
       default: "text",
-      validator: function(value) {
+      validator: function (value) {
         return ["text", "tag", "dot", "icon"].indexOf(value) != -1;
-      }
+      },
     },
     code: {
       type: String,
-      required: true
+      required: true,
     },
     value: {
       type: [String, Number],
-      required: false
+      required: false,
     },
     color: {
       type: Boolean,
-      default: true
+      default: true,
+    },
+    size: {
+      type: Number,
+      default: 24,
     },
     icon: {
       type: Boolean,
-      default: false
+      default: false,
     },
     img: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   created() {
     this.data = this.$store.getters.dictionaryByKey(this.code) || [];
@@ -71,7 +87,7 @@ export default {
     setName(v) {
       if ((v + "").indexOf(",") == -1) {
         var item;
-        this.data.map(u => {
+        this.data.map((u) => {
           if (u.code == v) {
             item = u;
           }
@@ -81,7 +97,7 @@ export default {
           this.item = item;
         } else {
           if (this.value == "undefined") {
-            this.name = ' '
+            this.name = " ";
           } else {
             this.name = this.value;
           }
@@ -90,7 +106,7 @@ export default {
         this.isMore = true;
         var items = [];
         var ul = (v + "").split(",");
-        this.data.map(u => {
+        this.data.map((u) => {
           if (ul.indexOf(u.code) > -1) {
             u.tagcolor = u.color | "default";
             u.style = { color: u.color | "inherit" };
@@ -99,11 +115,11 @@ export default {
         });
         this.items = items;
       }
-    }
-    ,showLife(){
-      this.modal= true ;
-      this.detail=()=>import("./life");
-    }
+    },
+    showLife() {
+      this.modal = true;
+      this.detail = () => import("./life");
+    },
   },
   computed: {
     tagcolor() {
@@ -125,9 +141,9 @@ export default {
         color:
           this.item && this.item.color != "" && this.item.color != null
             ? this.item.color
-            : "inherit"
+            : "inherit",
       };
-    }
+    },
   },
   watch: {
     value(v) {
@@ -139,7 +155,7 @@ export default {
         this.setName(this.value);
         this.$forceUpdate();
       }
-    }
-  }
+    },
+  },
 };
 </script>
\ No newline at end of file