Element|Element el-tag标签图文实例详解 Elementel-tag标签图文实例详解

1. 前言
2. 基本用法
3. 调整颜色
4. 调整尺寸
5. 调整主题
6. 数据绑定
7. 动态移除
8. 动态新增
9. 小结
补充：Vue对Element中的el-tag添加@click事件无效

1. 前言标签经常用来描述对象的一个、或者多个同类属性。
例如描述用户的爱好，描述用户拥有的角色。
el-tag提供了动态删除、新增标签的功能，所以非常适合使用在动态处理用户属性的场景。

2. 基本用法代码如下：

基本用法

篮球

使用el-tag即可创建一个标签，效果如下：

文章图片

3. 调整颜色通过type属性可以调整标签颜色：

调整颜色
默认色 |success色 |info色 |warning色 |dange色

效果如下：

文章图片

4. 调整尺寸通过size属性可以调整标签的尺寸大小：

调整尺寸
默认 |中等 |小型 |超小

效果如下：

文章图片

5. 调整主题 el-tag还支持不同风格的主题，通过effect属性即可调整，其中dark表示深色主题、light表示浅色主题、plain表示朴素主题：

调整主题
默认主题 |dark主题 |light主题 |plain主题

效果如下：

文章图片

6. 数据绑定可以使用v-for动态绑定一个数组：

数据绑定
{{item}}

数据区域定义如下：

data() {return {hobbies: ['篮球', '足球', '排球'],}},

效果如下：

文章图片

7. 动态移除通过设置属性closable，可以在标签右侧显示一个删除图标，点击该图标后，会触发@close绑定的方法。

动态移除
{{item}}

方法代码：

handleClose(item) {let _this = this; for (let i = 0; i < _this.hobbies.length; i++) {if (_this.hobbies[i] == item) {_this.hobbies.splice(i, 1); break; }}},

点击删除后，会从数组移除相应的元素，所以界面上对应的标签也会消失。

文章图片

8. 动态新增通过@click指定一个方法，点击方法后弹窗输入新标签项的内容，确定后将输入内容加入标签绑定的数组，就可以实现动态新增了：

动态新增
{{item}} |新增

方法代码：

btnAdd() {let _this = this; _this.$prompt('请输入您的爱好', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',}).then(({ value }) => {_this.hobbies.push(value); })}

点击新增标签，即可弹窗，点击确定后，即可添加新标签：