tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 通过
type参数设置主题类型，默认为primary - 属性
text设置标签内容
<u-tag text="标签" plain size="mini" type="warning"></u-tag>
copy
#自定义主题
<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>
copy
#圆形标签
- 类似胶囊形状
<u-tag text="标签" plain shape="circle"></u-tag> <u-tag text="标签" type="warning" shape="circle"></u-tag>
copy
#镂空标签
<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>
copy
#镂空带背景色
- 添加
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>
copy
#自定义尺寸
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>
copy
#可关闭标签
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>
copy
#带图片和图标
<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>
copy
#单选标签 和 多选标签
- 我们为您提供了单选和多选的事件，您可以在事件中获取参数列表
<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>
