tag add prop: name

when use v-for to render Tag, you can use ‘name’ prop to close tag

tag add prop: name
when use v-for to render Tag, you can use ‘name’ prop to close tag
梁灏
1 parent 19d41352
Showing 3 changed files with 16 additions and 49 deletions Show diff stats
examples/routers/tag.vue
src/components/card/card.vue
src/components/tag/tag.vue
 <template>
     <div>
-        <Tag>标签一</Tag>
-        <Tag>标签二</Tag>
-        <Tag closable>标签三</Tag>
-        <Tag closable color="blue">标签一</Tag>
-        <Tag closable color="green">标签二</Tag>
-        <Tag closable color="red">标签三</Tag>
-        <Tag closable color="yellow">标签四</Tag>
-        <br><br>
-        <Tag type="dot">标签一</Tag>
-        <Tag type="dot" closable>标签一</Tag>
-        <Tag type="dot" color="blue">标签一</Tag>
-        <Tag type="dot" color="blue" closable>标签一</Tag>
-        <Tag type="dot" color="green">标签一</Tag>
-        <Tag type="dot" color="green" closable>标签一</Tag>
-        <Tag type="dot" color="red">标签一</Tag>
-        <Tag type="dot" color="red" closable>标签一</Tag>
-        <Tag type="dot" color="yellow">标签一</Tag>
-        <Tag type="dot" color="yellow" closable>标签一</Tag>
-        <br><br>
-        <Tag type="border">标签一</Tag>
-        <Tag type="border" closable>标签一</Tag>
-        <Tag type="border" color="blue">标签一</Tag>
-        <Tag type="border" color="blue" closable>标签一</Tag>
-        <Tag type="border" color="green">标签一</Tag>
-        <Tag type="border" color="green" closable>标签一</Tag>
-        <Tag type="border" color="red">标签一</Tag>
-        <Tag type="border" color="red" closable>标签一</Tag>
-        <Tag type="border" color="yellow">标签一</Tag>
-        <Tag type="border" color="yellow" closable>标签一</Tag>
-        <Button type="primary" @click="modal1 = true">显示对话框</Button>
-        <br><br>
-        <Tag v-if="ccc" closable @on-close="clickTagClose">标签一</Tag>
+        <Tag v-for="item in count" :key="item" :name="item" @on-close="close" closable>标签{{ item + 1 }}</Tag>
+        <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                modal1: false,
-                loading: true,
-                ccc: true
+                count: 3
             }
         },
         methods: {
-            ok () {
-                setTimeout(() => {
-                    this.modal1 = false;
-                }, 2000);
-            },
-            clickTag() {
-                console.log('click tag');
-            },
-            clickTagClose() {
-                this.ccc = false;
-                console.log('click tag close-icon');
+            close (e, name) {
+                console.log(e);
+                console.log(name);
             }
         }
     }
@@ -58,7 +58,7 @@
                 if (this.padding !== defaultPadding) {
                     return {
                         padding: `${this.padding}px`
-                    }
+                    };
                 } else {
                     return '';
                 }
@@ -28,6 +28,9 @@
                 validator (value) {
                     return oneOf(value, ['border', 'dot']);
                 }
+            },
+            name: {
+                type: [String, Number]
             }
         },
         computed: {
@@ -52,8 +55,12 @@
             }
         },
         methods: {
-            close (e) {
-                this.$emit('on-close', e);
+            close (event) {
+                if (this.name === undefined) {
+                    this.$emit('on-close', event);
+                } else {
+                    this.$emit('on-close', event, this.name);
+                }
             }
         }
     };