DataTag 标签选择
DataTag 标签选择，通过数据驱动的单选标签和复选标签。
# 支持平台
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
# 单选标签
通过 options 属性设置标签选择列表数据。
<wui-data-tag :options="options" @change="change"></wui-data-tag>
const options = ref(['选项一', '选项二', '选项三', '选项四'])
const change = (e) => {
console.log(e.detail.value)
}
# 复选标签/带角标
通过 multiple 属性设置是否为复选标签，mark 属性设置选中时是否展示角标，options 属性设置标签选择列表数据。
<wui-data-tag multiple mark :options="options" @change="change"></wui-data-tag>
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| options | Array | 标签列表数据，具体格式见下方说明 | [ ] | - |
| modelValue | Array, String, Number | 初始选中值，vue3时使用 | [ ] | - |
| value | Array, String, Number | 初始选中值，vue2时使用 | [ ] | - |
| multiple | Boolean | 是否可多选 | false | - |
| min | Number, String | 最小选择数，仅单选时有效，可选值：0、1 | 1 | - |
| multipleMin | Number, String | 最小选择数，仅多选时有效 | 0 | - |
| max | Number, String | 最大选择数，仅复选时有效，值为-1时则不限制 | -1 | - |
| width | Number, String | 标签宽度，为0时则为auto，单位rpx | 0 | - |
| height | Number, String | 标签高度，为0时则为auto，单位rpx | 0 | - |
| padding | Array | 标签padding值，[上，右，下，左] | ['16rpx', '32rpx'] | - |
| gap | Number, String | 各标签之间间距，单位rpx | 20 | - |
| radius | Number, String | 标签圆角值，单位rpx | 6 | - |
| size | Number, String | 标签字体大小，单位rpx | 24 | - |
| color | String | 标签字体颜色 | #333 | - |
| activeColor | String | 标签选中时字体颜色 | #465CFF | - |
| background | String | 标签背景色 | #fff | - |
| activeBgColor | String | 标签选中时背景色 | #fff | - |
| defaultBorderColor | String | 标签默认边框颜色，未设置则默认使用背景色 | - | - |
| borderColor | String | 标签选中时边框颜色 | #465CFF | - |
| mark | Boolean | 标签选中时是否显示角标，设为true时，圆角值不建议设置过大 | false | - |
| markSize | Number, String | 角标字体大小，单位rpx | 52 | - |
| markColor | String | 角标颜色 | #465CFF | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 点击标签时触发 | event.detail = { value:value item:item项 } |
| @input | 点击标签时触发input事件,vue2下可使用v-model指令 | value |
| @update:modelValue Vue3 | 用于组件的双向绑定,使用v-model指令即可 | value |