Element el-tag 标签详解

点此查看全部文字教程、视频教程、源代码

1. 前言

标签经常用来描述对象的一个、或者多个同类属性。

例如描述用户的爱好，描述用户拥有的角色。

el-tag提供了动态删除、新增标签的功能，所以非常适合使用在动态处理用户属性的场景。

2. 基本用法

代码如下：

	基本用法<br>
    <el-tag>篮球</el-tag>

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

3. 调整颜色

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

	调整颜色<br>
    <el-tag>默认色</el-tag> |
    <el-tag type="success">success色</el-tag> |
    <el-tag type="info">info色</el-tag> |
    <el-tag type="warning">warning色</el-tag> |
    <el-tag type="danger">dange色</el-tag>

效果如下：

4. 调整尺寸

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

	调整尺寸<br>
    <el-tag>默认</el-tag> |
    <el-tag size="medium">中等</el-tag> |
    <el-tag size="small">小型</el-tag> |
    <el-tag size="mini">超小</el-tag>

效果如下：

5. 调整主题

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

	调整主题<br>
    <el-tag type="success">默认主题</el-tag> |
    <el-tag type="success" effect="dark">dark主题</el-tag> |
    <el-tag type="success" effect="light">light主题</el-tag> |
    <el-tag type="success" effect="plain">plain主题</el-tag>

效果如下：

6. 数据绑定

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

	数据绑定<br>
    <el-tag v-for="item in hobbies">{{item}}</el-tag>

数据区域定义如下：

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

效果如下：

7. 动态移除

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

	动态移除<br>
    <el-tag v-for="item in hobbies" closable @close="handleClose(item)">{{item}}</el-tag>

方法代码：

	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指定一个方法，点击方法后弹窗输入新标签项的内容，确定后将输入内容加入标签绑定的数组，就可以实现动态新增了：

	动态新增<br>
    <el-tag v-for="item in hobbies">{{item}}</el-tag> |
    <el-tag type="success" @click="btnAdd">新增</el-tag>

方法代码：

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

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

9. 小结

标签在日常开发工作中，还是比较常用的。el-tag封装的非常简单利索，推荐！