uniapp中uview组件库丰富的tab标签
2023-12-28 13:35:25
目录
Tag 标签?
tag组件一般用于标记和选择,我们提供了更加丰富的表现形式,能够较全面的涵盖您的使用场景
基本使用
- 通过
type
参数设置主题类型,默认为primary
- 属性
text
设置标签内容
<u-tag text="标签" plain size="mini" type="warning"></u-tag>
#自定义主题
<u-tag text="标签"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签"type="success"></u-tag>
<u-tag text="标签" type="error"></u-tag>
#圆形标签
- 类似胶囊形状
<u-tag text="标签" plain shape="circle"></u-tag>
<u-tag text="标签" type="warning" shape="circle"></u-tag>
#镂空标签
<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain></u-tag>
<u-tag text="标签" type="success" plain></u-tag>
<u-tag text="标签" type="error" plain></u-tag>
#镂空带背景色
- 添加
plainFill
属性镂空带背景色
<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain plainFill></u-tag>
<u-tag text="标签" type="success" plain plainFill></u-tag>
<u-tag text="标签" type="error" plain plainFill></u-tag>
#自定义尺寸
size
属性为您提供了三种规格的标签大小,默认中等。
<u-tag text="标签" plain size="mini"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签" type="success" plain size="large"></u-tag>
#可关闭标签
tag
在右上角提供了删除标签的样式
<u-tag text="标签" size="mini" closable :show="close1" @close="close1 = false"></u-tag>
<u-tag text="标签" type="warning" closable :show="close2" @close="close2 = false"></u-tag>
<u-tag text="标签" type="success" plain size="large"
closable :show="close3" @close="close3 = false"></u-tag>
<script>
export default {
data() {
return {
close1: true,
close2: true,
close3: true,
radios: [{
checked: true
},
{
checked: false
},
{
checked: false
}
],
checkboxs: [{
checked: true
},
{
checked: false
},
{
checked: false
}
]
}
},
}
</script>
#带图片和图标
<u-tag text="标签" size="mini" icon="map" plain></u-tag>
<u-tag text="标签" type="warning" icon="tags-fill"></u-tag>
<u-tag text="标签" type="success" plain size="large"
icon="https://cdn.uviewui.com/uview/example/tag.png"></u-tag>
#单选标签 和 多选标签
- 我们为您提供了单选和多选的事件,您可以在事件中获取参数列表
<template>
<!-- 单选 -->
<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
<u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
@click="radioClick">
</u-tag>
</view>
<!-- 多选 -->
<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
<u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
@click="checkboxClick">
</u-tag>
</view>
</template>
<script>
export default {
data() {
return {
radios: [{
checked: true
},
{
checked: false
},
{
checked: false
}
],
checkboxs: [{
checked: true
},
{
checked: false
},
{
checked: false
}
]
}
},
methods: {
radioClick(name) {
this.radios.map((item, index) => {
item.checked = index === name ? true : false
})
},
checkboxClick(name) {
this.checkboxs[name].checked = !this.checkboxs[name].checked
}
}
}
</script>
<style lang="scss">
.u-page__tag-item {
margin-right: 20px;
}
</style>
文章来源:https://blog.csdn.net/m0_72603435/article/details/135260231
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!