Element el-tag 标签详解

妖狐艹你老母 2022-09-17 03:00 563阅读 0赞

***[点此查看全部文字教程、视频教程、源代码  
][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 调整颜色
 *  4. 调整尺寸
 *  5. 调整主题
 *  6. 数据绑定
 *  7. 动态移除
 *  8. 动态新增
 *  9. 小结

# 1. 前言 #

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

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

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

# 2. 基本用法 #

代码如下：

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

使用el-tag即可创建一个标签，效果如下：  
![在这里插入图片描述][2255f1b7097b46149003bf26d31911a3.png]

# 3. 调整颜色 #

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

调整颜色 
 <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>

效果如下：  
![在这里插入图片描述][1f108c08f2694e8dae24fb42d8323fd1.png]

# 4. 调整尺寸 #

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

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

效果如下：  
![在这里插入图片描述][8e90591cf3174d26898c24988a1fc76a.png]

# 5. 调整主题 #

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

调整主题 
 <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>

效果如下：  
![在这里插入图片描述][380cca7c191b452b9bbd750939e9a78c.png]

# 6. 数据绑定 #

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

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

数据区域定义如下：

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

效果如下：  
![在这里插入图片描述][44aed7e5f3c243aca3571c2ea110d675.png]

# 7. 动态移除 #

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

动态移除 
 <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;
 }
 }
 },

点击删除后，会从数组移除相应的元素，所以界面上对应的标签也会消失。  
![在这里插入图片描述][9c5280ff354343e3a93c42b222c17a16.png]

# 8. 动态新增 #

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

动态新增 
 <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);
          })
        }

点击新增标签，即可弹窗，点击确定后，即可添加新标签：  
![在这里插入图片描述][6e9c149b907e4ca7b450ceac0569e4b9.png]

# 9. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[2255f1b7097b46149003bf26d31911a3.png]: /images/20220828/d95ddeca48a54ee49ee48c37659346f0.png
[1f108c08f2694e8dae24fb42d8323fd1.png]: /images/20220828/3855258ef4e340a197e2fb33ef93edcc.png
[8e90591cf3174d26898c24988a1fc76a.png]: /images/20220828/198fc07f294e492d826f46f18e44ad9e.png
[380cca7c191b452b9bbd750939e9a78c.png]: /images/20220828/a5577b3b558b4d0dafaca3e51d64cbef.png
[44aed7e5f3c243aca3571c2ea110d675.png]: /images/20220828/7847b682b3514f5db17ea29d30c354be.png
[9c5280ff354343e3a93c42b222c17a16.png]: /images/20220828/3ab0a130671246ce880b3156eb724772.png
[6e9c149b907e4ca7b450ceac0569e4b9.png]: /images/20220828/effd7c3b61ff4477af6b0059340188ca.png