uniapp中uview组件库丰富的tab标签

目录

[Tag 标签](#Tag 标签)

基本使用

#自定义主题

#圆形标签

#镂空标签

#镂空带背景色

#自定义尺寸

#可关闭标签

#带图片和图标

[#单选标签 和 多选标签](#单选标签 和 多选标签)


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>
相关推荐
望风的懒蜗牛1 小时前
android studio开发UniComponent<SurfaceView>组件
android·uni-app·android studio
2501_916007472 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
iOS阿玮2 小时前
请及时同意苹果开发者协议,避免影响迭代工作。
uni-app·app·apple
00后程序员张3 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909064 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Felicity_Gao5 小时前
uni-app 开发APP应用媒体处理与文件管理功能
java·uni-app·媒体
2501_915918416 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
2501_915921437 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918417 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
游戏开发爱好者89 小时前
iOS 抓包工具实战 开发者的工具矩阵与真机排查流程
android·ios·小程序·https·uni-app·iphone·webview