组件-Element---Tag （标签）

组件-Element—Tag （标签）

组件—标签

1. 基础用法
   

   <el-tag>标签一</el-tag>
   <el-tag type="success">标签二</el-tag>
   <el-tag type="info">标签三</el-tag>
   <el-tag type="warning">标签四</el-tag>
   <el-tag type="danger">标签五</el-tag>
   

2. 可移除标签
   

   <el-tag
     v-for="tag in tags"
     :key="tag.name"
     closable
     :type="tag.type">
     {{tag.name}}
   </el-tag>
   
   <script>
     export default {
       data() {
         return {
           tags: [
             { name: '标签一', type: '' },
             { name: '标签二', type: 'success' },
             { name: '标签三', type: 'info' },
             { name: '标签四', type: 'warning' },
             { name: '标签五', type: 'danger' }
           ]
         };
       }
     }
   </script>
   

3. 动态编辑标签
   

   <el-tag
     :key="tag"
     v-for="tag in dynamicTags"
     closable
     :disable-transitions="false"
     @close="handleClose(tag)">
     {{tag}}
   </el-tag>
   <el-input
     class="input-new-tag"
     v-if="inputVisible"
     v-model="inputValue"
     ref="saveTagInput"
     size="small"
     @keyup.enter.native="handleInputConfirm"
     @blur="handleInputConfirm"
   >
   </el-input>
   <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
   
   <style>
     .el-tag + .el-tag {
       margin-left: 10px;
     }
     .button-new-tag {
       margin-left: 10px;
       height: 32px;
       line-height: 30px;
       padding-top: 0;
       padding-bottom: 0;
     }
     .input-new-tag {
       width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
     }
   </style>
   
   <script>
     export default {
       data() {
         return {
           dynamicTags: ['标签一', '标签二', '标签三'],
           inputVisible: false,
           inputValue: ''
         };
       },
       methods: {
         handleClose(tag) {
           this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
         },
   
         showInput() {
           this.inputVisible = true;
           this.$nextTick(_ => {
             this.$refs.saveTagInput.$refs.input.focus();
           });
         },
   
         handleInputConfirm() {
           let inputValue = this.inputValue;
           if (inputValue) {
             this.dynamicTags.push(inputValue);
           }
           this.inputVisible = false;
           this.inputValue = '';
         }
       }
     }
   </script>
   

4. 不同尺寸
   

   <el-tag closable>默认标签</el-tag>
   <el-tag size="medium" closable>中等标签</el-tag>
   <el-tag size="small" closable>小型标签</el-tag>
   <el-tag size="mini" closable>超小标签</el-tag>
   

5. 不同主题
   

   <div class="tag-group">
     <span class="tag-group__title">Dark</span>
     <el-tag
       v-for="item in items"
       :key="item.label"
       :type="item.type"
       effect="dark">
       {{ item.label }}
     </el-tag>
   </div>
   <div class="tag-group">
     <span class="tag-group__title">Plain</span>
     <el-tag
       v-for="item in items"
       :key="item.label"
       :type="item.type"
       effect="plain">
       {{ item.label }}
     </el-tag>
   </div>
   
   <script>
     export default {
       data() {
         return {
           items: [
             { type: '', label: '标签一' },
             { type: 'success', label: '标签二' },
             { type: 'info', label: '标签三' },
             { type: 'danger', label: '标签四' },
             { type: 'warning', label: '标签五' }
           ]
         }
       }
     }
   </script>
   

6. Attributes
   

7. Events
   

标签：name,标签,tag,Element,Tag,inputValue,组件,label,type
来源： https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94588463