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封装的非常简单利索，推荐！
补充：Vue对Element中的el-tag添加@click事件无效
在做评论模块的时候，想着对el-tag元素添加点击事件，发现无法触发，代码如下所示
<el-tag type="error" @click="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
我们在点击el-tag标签的时候，无法触发其点击事件
解决方法
通过查阅资料发现官方给定了解答
也就是所，必须使用@click.native才能够触发点击行为，而对于button，直接使用@click即可，修改后的代码如下所示，能够正常完成点击事件了~
<el-tag type="error" @click.native="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
到此这篇关于Element el-tag标签的文章就介绍到这了,更多相关Element el-tag标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 避免变量赋值后双向绑定的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了在Vue中用canvas实现二维码和图片合成海报的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了Vue 实现前进刷新后退不刷新的效果,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
vue使用$store.commit() undefined报错的解决
这篇文章主要介绍了vue使用$store.commit() undefined报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了如何基于Vue3封装实现一个图片查看器,可以点击图片放大和关闭放大的图片,感兴趣的小伙伴可以了解一下2025-02-02
这篇文章主要介绍了Vue3组件的开发，上一篇文章我们价绍了Vue3（三）网站首页布局开发，今天继续上篇内容展开组件的开发,需要的朋友可以参考一下2021-11-11
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,本文给大家介绍Vue DPlayer详细使用,本文将从四个方面对Vue-DPlayer进行详细的阐述,感兴趣的朋友一起看看吧2023-10-10
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
这篇文章主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue项目中js-cookie的使用存储token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论