add improve tag docs

examples/docs/en-US/tag.md

@@ -3,18 +3,34 @@
     data() {
       return {
         tags: [
-          { key: 1, name: 'Tag one', type: '' },
-          { key: 2, name: 'Tag Two', type: 'gray' },
-          { key: 5, name: 'Tag Three', type: 'primary' },
-          { key: 3, name: 'Tag Four', type: 'success' },
-          { key: 4, name: 'Tag Five', type: 'warning' },
-          { key: 6, name: 'Tag Six', type: 'danger' }
-        ]
+          { name: 'Tag 1', type: '' },
+          { name: 'Tag 2', type: 'gray' },
+          { name: 'Tag 3', type: 'primary' },
+          { name: 'Tag 4', type: 'success' },
+          { name: 'Tag 5', type: 'warning' },
+          { name: 'Tag 6', type: 'danger' }
+        ],
+        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+        inputVisible: false,
+        inputValue: ''
       };
     },
     methods: {
       handleClose(tag) {
-        this.tags.splice(this.tags.indexOf(tag), 1);
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
       }
     }
   }
@@ -25,6 +41,20 @@
     .el-tag + .el-tag {
       margin-left: 10px;
     }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 24px;
+      line-height: 22px;
+      padding: 0 *;
+    }
+    .input-new-tag {
+      width: 78px;
+      margin-left: 10px;
+
+      .el-input__inner {
+        height: 24px;
+      }
+    }
   }
 </style>
 
@@ -48,16 +78,13 @@ Used for marking and selection.
 
 ### Removable Tag
 
-:::demo Set the `closable` attribute to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
+:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
 
 ```html
 <el-tag
   v-for="tag in tags"
   :closable="true"
   :type="tag.type"
-  :key="tag"
-  :close-transition="false"
-  @close="handleClose(tag)"
 >
 {{tag.name}}
 </el-tag>
@@ -67,18 +94,70 @@ Used for marking and selection.
     data() {
       return {
         tags: [
-          { key: 1, name: 'Tag One', type: '' },
-          { key: 2, name: 'Tag Two', type: 'gray' },
-          { key: 5, name: 'Tag Three', type: 'primary' },
-          { key: 3, name: 'Tag Four', type: 'success' },
-          { key: 4, name: 'Tag Five', type: 'warning' },
-          { key: 6, name: 'Tag Six', type: 'danger' }
+          { name: 'Tag 1', type: '' },
+          { name: 'Tag 2', type: 'gray' },
+          { name: 'Tag 3', type: 'primary' },
+          { name: 'Tag 4', type: 'success' },
+          { name: 'Tag 5', type: 'warning' },
+          { name: 'Tag 6', type: 'danger' }
         ]
       };
+    }
+  }
+</script>
+```
+:::
+
+### Edit Dynamically
+
+You can use the `close` event to add and remove tag dynamically.
+
+:::demo
+```html
+<el-tag
+  v-for="tag in dynamicTags"
+  :closable="true"
+  :close-transition="false"
+  @close="handleClose(tag)"
+>
+{{tag}}
+</el-tag>
+<el-input
+  class="input-new-tag"
+  v-if="inputVisible"
+  v-model="inputValue"
+  ref="saveTagInput"
+  size="mini"
+  @keyup.enter.native="handleInputConfirm"
+  @blur="handleInputConfirm"
+>
+</el-input>
+<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+<script>
+  export default {
+    data() {
+      return {
+        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+        inputVisible: false,
+        inputValue: ''
+      };
     },
     methods: {
       handleClose(tag) {
-        this.tags.splice(this.tags.indexOf(tag), 1);
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
       }
     }
   }

examples/docs/zh-CN/tag.md

@@ -3,18 +3,34 @@
     data() {
       return {
         tags: [
-          { key: 1, name: '标签一', type: '' },
-          { key: 2, name: '标签二', type: 'gray' },
-          { key: 5, name: '标签三', type: 'primary' },
-          { key: 3, name: '标签四', type: 'success' },
-          { key: 4, name: '标签五', type: 'warning' },
-          { key: 6, name: '标签六', type: 'danger' }
-        ]
+          { name: '标签一', type: '' },
+          { name: '标签二', type: 'gray' },
+          { name: '标签三', type: 'primary' },
+          { name: '标签四', type: 'success' },
+          { name: '标签五', type: 'warning' },
+          { name: '标签六', type: 'danger' }
+        ],
+        dynamicTags: ['标签一', '标签二', '标签三'],
+        inputVisible: false,
+        inputValue: ''
       };
     },
     methods: {
       handleClose(tag) {
-        this.tags.splice(this.tags.indexOf(tag), 1);
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
       }
     }
   }
@@ -25,6 +41,20 @@
     .el-tag + .el-tag {
       margin-left: 10px;
     }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 24px;
+      line-height: 22px;
+      padding: 0 *;
+    }
+    .input-new-tag {
+      width: 78px;
+      margin-left: 10px;
+
+      .el-input__inner {
+        height: 24px;
+      }
+    }
   }
 </style>
 
@@ -48,16 +78,13 @@
 
 ### 可移除标签
 
-:::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。
+:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。
 
 ```html
 <el-tag
   v-for="tag in tags"
   :closable="true"
   :type="tag.type"
-  :key="tag"
-  :close-transition="false"
-  @close="handleClose(tag)"
 >
 {{tag.name}}
 </el-tag>
@@ -67,18 +94,70 @@
     data() {
       return {
         tags: [
-          { key: 1, name: '标签一', type: '' },
-          { key: 2, name: '标签二', type: 'gray' },
-          { key: 5, name: '标签三', type: 'primary' },
-          { key: 3, name: '标签四', type: 'success' },
-          { key: 4, name: '标签五', type: 'warning' },
-          { key: 6, name: '标签六', type: 'danger' }
+          { name: '标签一', type: '' },
+          { name: '标签二', type: 'gray' },
+          { name: '标签三', type: 'primary' },
+          { name: '标签四', type: 'success' },
+          { name: '标签五', type: 'warning' },
+          { name: '标签六', type: 'danger' }
         ]
       };
+    }
+  }
+</script>
+```
+:::
+
+### 动态编辑标签
+
+动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现
+
+:::demo
+```html
+<el-tag
+  v-for="tag in dynamicTags"
+  :closable="true"
+  :close-transition="false"
+  @close="handleClose(tag)"
+>
+{{tag}}
+</el-tag>
+<el-input
+  class="input-new-tag"
+  v-if="inputVisible"
+  v-model="inputValue"
+  ref="saveTagInput"
+  size="mini"
+  @keyup.enter.native="handleInputConfirm"
+  @blur="handleInputConfirm"
+>
+</el-input>
+<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+<script>
+  export default {
+    data() {
+      return {
+        dynamicTags: ['标签一', '标签二', '标签三'],
+        inputVisible: false,
+        inputValue: ''
+      };
     },
     methods: {
       handleClose(tag) {
-        this.tags.splice(this.tags.indexOf(tag), 1);
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
       }
     }
   }