Element el-tag标签怎么用
导读:本文共2939字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 1. 前言标签经常用来描述对象的一个、或者多个同类属性。例如描述用户的爱好,描述用户拥有的角色。el-tag提供了动态删除、新增标签的功能,所以非常适合使用在动态处理用户属性的场景。2. 基本用法代码如下: 基本用法<br> <el-tag>篮球</el-tag>使用el-tag即可创建一个标签,效果如下:3. 调整颜色通过... ...
目录
(为您整理了一些要点),点击可以直达。1. 前言
标签经常用来描述对象的一个、或者多个同类属性。
例如描述用户的爱好,描述用户拥有的角色。
el-tag提供了动态删除、新增标签的功能,所以非常适合使用在动态处理用户属性的场景。
2. 基本用法
代码如下:
基本用法<br>
<el-tag>篮球</el-tag>
使用el-tag即可创建一个标签,效果如下:
3. 调整颜色
通过type属性可以调整标签颜色:
调整颜色<br><el-tag>默认色</el-tag>|<el-tagtype="success">success色</el-tag>|<el-tagtype="info">info色</el-tag>|<el-tagtype="warning">warning色</el-tag>|<el-tagtype="danger">dange色</el-tag>
效果如下:
4. 调整尺寸
通过size属性可以调整标签的尺寸大小:
调整尺寸<br><el-tag>默认</el-tag>|<el-tagsize="medium">中等</el-tag>|<el-tagsize="small">小型</el-tag>|<el-tagsize="mini">超小</el-tag>
效果如下:
5. 调整主题
el-tag还支持不同风格的主题,通过effect属性即可调整,其中dark表示深色主题、light表示浅色主题、plain表示朴素主题:
调整主题<br><el-tagtype="success">默认主题</el-tag>|<el-tagtype="success"effect="dark">dark主题</el-tag>|<el-tagtype="success"effect="light">light主题</el-tag>|<el-tagtype="success"effect="plain">plain主题</el-tag>
效果如下:
6. 数据绑定
可以使用v-for动态绑定一个数组:
数据绑定<br><el-tagv-for="iteminhobbies">{{item}}</el-tag>
数据区域定义如下:
data(){return{hobbies:['篮球','足球','排球'],}},
效果如下:
7. 动态移除
通过设置属性closable,可以在标签右侧显示一个删除图标,点击该图标后,会触发@close绑定的方法。
动态移除<br><el-tagv-for="iteminhobbies"closable@close="handleClose(item)">{{item}}</el-tag>
方法代码:
handleClose(item){let_this=this;for(leti=0;i<_this.hobbies.length;i++){if(_this.hobbies[i]==item){_this.hobbies.splice(i,1);break;}}},
点击删除后,会从数组移除相应的元素,所以界面上对应的标签也会消失。
8. 动态新增
通过@click指定一个方法,点击方法后弹窗输入新标签项的内容,确定后将输入内容加入标签绑定的数组,就可以实现动态新增了:
动态新增<br><el-tagv-for="iteminhobbies">{{item}}</el-tag>|<el-tagtype="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-tagtype="error"@click="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
我们在点击el-tag标签的时候,无法触发其点击事件
解决方法
通过查阅资料发现官方给定了解答
也就是所,必须使用@click.native才能够触发点击行为,而对于button,直接使用@click即可,修改后的代码如下所示,能够正常完成点击事件了~
<el-tagtype="error"@click.native="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
Element el-tag标签怎么用的详细内容,希望对您有所帮助,信息来源于网络。