Tag 标签

用于标记和选择。

基础用法

由type属性来选择tag的类型，也可以通过color属性来自定义背景色。

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

View Code

可移除标签

设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。

 1 <el-tag
 2   v-for="tag in tags"
 3   :key="tag.name"
 4   closable
 5   :type="tag.type">
 6   {{tag.name}}
 7 </el-tag>
 8 
 9 <script>
10   export default {
11     data() {
12       return {
13         tags: [
14           { name: '标签一', type: '' },
15           { name: '标签二', type: 'success' },
16           { name: '标签三', type: 'info' },
17           { name: '标签四', type: 'warning' },
18           { name: '标签五', type: 'danger' }
19         ]
20       };
21     }
22   }
23 </script>

View Code

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现

 1 <el-tag
 2   :key="tag"
 3   v-for="tag in dynamicTags"
 4   closable
 5   :disable-transitions="false"
 6   @close="handleClose(tag)">
 7   {{tag}}
 8 </el-tag>
 9 <el-input
10   class="input-new-tag"
11   v-if="inputVisible"
12   v-model="inputValue"
13   ref="saveTagInput"
14   size="small"
15   @keyup.enter.native="handleInputConfirm"
16   @blur="handleInputConfirm"
17 >
18 </el-input>
19 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
20 
21 <style>
22   .el-tag + .el-tag {
23     margin-left: 10px;
24   }
25   .button-new-tag {
26     margin-left: 10px;
27     height: 32px;
28     line-height: 30px;
29     padding-top: 0;
30     padding-bottom: 0;
31   }
32   .input-new-tag {
33     width: 90px;
34     margin-left: 10px;
35     vertical-align: bottom;
36   }
37 </style>
38 
39 <script>
40   export default {
41     data() {
42       return {
43         dynamicTags: ['标签一', '标签二', '标签三'],
44         inputVisible: false,
45         inputValue: ''
46       };
47     },
48     methods: {
49       handleClose(tag) {
50         this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
51       },
52 
53       showInput() {
54         this.inputVisible = true;
55         this.$nextTick(_ => {
56           this.$refs.saveTagInput.$refs.input.focus();
57         });
58       },
59 
60       handleInputConfirm() {
61         let inputValue = this.inputValue;
62         if (inputValue) {
63           this.dynamicTags.push(inputValue);
64         }
65         this.inputVisible = false;
66         this.inputValue = '';
67       }
68     }
69   }
70 </script>

View Code

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

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

View Code

Attributes

参数	说明	类型	可选值	默认值
type	主题	string	success/info/warning/danger	—
closable	是否可关闭	boolean	—	false
disable-transitions	是否禁用渐变动画	boolean	—	false
hit	是否有边框描边	boolean	—	false
color	背景色	string	—	—
size	尺寸	string	medium / small / mini	—

Events

事件名称	说明	回调参数
close	关闭 Tag 时触发的事件	—