vue+vant,vant table组件
这篇文章主要介绍了某视频剪辑软件移动端项目栈组件库之标签详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
万特组件库之tagtag标签选中（类型选择，分类选择)
vant组件库之tag
直接上代码
模板
div class=pd50
！-标签标签的属性与纽扣按钮的大体相同-
！-基础用法
其他第三方用户界面库的颜色可能不一致
-
氘基础用法/h2
货车标签类型="主要"标签/货车标签
van-tag类型=成功标签/货车标签
van-tag类型=危险标签/货车标签
van-tag类型=警告标签/货车标签
！-空心样式
多数第三方都是采用平原作为空心样式
-
氘空心样式/h2
van-tag plain type=primary 标签/货车标签
氘圆角/h2
货车标签圆形类型=主要标签/货车标签
氘标记样式半圆角/h2
货车标签标记类型="主要"标签/货车标签
氘可关闭标签/h2
！-需要自己写逻辑控制关闭-
van-tag v-if= show closeable type= primary @ close= close
标签
/货车标签
氘大小/h2
货车标签类型="主要"标签/货车标签
van-tag type= primary size= medium 标签/货车标签
van-tag type= primary size= large 标签/货车标签
氘自定义颜色/h2
！-
颜色背景颜色
文本颜色文本颜色
-
van-tag color=#7232dd 标签/货车标签
van-tag color= # ffe1e 1 text-color= # e44e 44 标签/货车标签
van-tag color=#7232dd plain标签/货车标签
氘渐变色没有起作用，后续博文处理该问题/h2
van-tag color=线性渐变（向右，#ff6034，#ee0a24)我是渐变标签/货车标签
！- -
氘其他/h2
差异内容是个默认插槽，也就是说可以进行一些额外的布局/div
成功 plain span style= color:# 347 ad 0 我可以/span/货车标签
van-tag类型=成功平原
img src=@/assets/1.jpg alt=
/货车标签
/div
/模板
脚本
从"万特"导入{ Tag }；
导出默认值{
组件：{
vanTag:标签，
},
data() {
返回{
秀：真的，
};
},
方法：{
close() {
this.show=false
},
},
};
/脚本
样式lang=scss 范围
/风格
效果
tag标签选中(类型选择，分类选择)
使用三元表达式为类选择器给值。当变量活跃的被点击赋值时则，引用活跃的样式。无点击使用分类样式。
往往就是简单的操作，就把自己玩懵逼了！写半天报找不到分类，还在想诶？分类不是变量啊。一脸懵逼。最后发现活动:分类。没加。（日常自己坑自己)
效果图：
div v-for=(item，index) in data
active==item.type？活动:分类 @click=oncheck(item.type)
{{item.type}}/span
/div
js:
data() {
返回{
数据：[{
类型：“66P”
}, {
类型：“760P”
}, {
类型："(含16G系统优盘)660P
}, {
类型："(含16G系统优化盘)760P
}],
活动：""
}
},
方法：{
oncheck(名称){
console.log(名称)
this.active=name
}
}
css:活动{
浮动：左；
左边距：10px
填充：10px
背景：# efc531
边距-底部：10px
边框-半径：4px
字体大小：14px
}。分类{
浮动：左；
左边距：10px
填充：10px
背景：# f7f7f7
边距-底部：10px
边框-半径：4px
字体大小：14px
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。