DataTag 标签选择

以标签形式展示选项，支持单选、多选和选中数量限制。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<template>
  <!-- 单选标签 -->
  <fui-data-tag v-model="selected" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      // 当前选中值
      selected: 'apple',
      // 标签文本与对应值
      options: [
        { text: '苹果', value: 'apple' },
        { text: '香蕉', value: 'banana' }
      ]
    };
  }
};
</script>

数据结构

options 支持字符串数组或对象数组。对象默认使用 text、value、isAll、disable 表示文字、值、全选项和禁用状态，可通过对应的键名属性调整。多选时使用数组作为选中值。

属性

除 padding 中自行指定单位外，尺寸和间距的单位为 rpx。

属性	类型	说明	官网默认值
options	Array	标签选项	[]
textKey	String	选项文字字段名	text
valueKey	String	选项值字段名	value
isAllKey	String	全选标记字段名	isAll
disableKey	String	禁用标记字段名	disable
modelValue	Array / String / Number	Vue 3 选中值，可用 v-model	[]
value	Array / String / Number	Vue 2 选中值，可用 v-model	[]
multiple	Boolean	是否多选	false
min	Number / String	单选最少选中数，可为 0 或 1	1
multipleMin	Number / String	多选最少选中数	0
max	Number / String	多选最多选中数，-1 表示不限制	-1
width	Number / String	标签宽度，0 为自动	0
height	Number / String	标签高度，0 为自动	0
padding	Array	标签内边距	['16rpx', '32rpx']
gap	Number / String	标签间距	20
radius	Number / String	标签圆角	6
size	Number / String	文字大小	24
color	String	默认文字颜色	#333
activeColor	String	选中文字颜色	#465CFF
background	String	默认背景色	#fff
activeBgColor	String	选中背景色	#fff
defaultBorderColor	String	默认边框色，未设置时使用背景色	-
borderColor	String	选中边框色	#465CFF
mark	Boolean	选中时是否显示角标	false
markSize	Number / String	角标大小	52
markColor	String	角标颜色	#465CFF
nowrap	Boolean	是否强制单行，横向滚动容器需自行提供	false

事件

事件	说明	回调参数
change	选项变化时触发	event.detail 包含 value 和 item
input	Vue 2 双向绑定更新时触发	选中值
update:modelValue	Vue 3 双向绑定更新时触发	选中值

平台说明

本地源码中 activeColor、borderColor 和 markColor 的属性默认值为空，实际使用主题主色，默认主题下与表中颜色一致。

插槽

插槽	说明
—	官网未列出该组件的插槽