点此查看全部文字教程、视频教程、源代码
本文目录 1. 前言2. 基本用法3. 调整颜色4. 调整尺寸5. 调整主题6. 数据绑定7. 动态移除8. 动态新增9. 小结 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封装的非常简单利索,推荐!
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |