# ui-form-checkbox-bar 标签式复选框组件

版本：v2.3.11

以标签（Tag）形式展示的复选框组件，选中/未选中分别以不同主题的 ui-tag 呈现，支持自定义图标、样式和大小。可配合 ui-form-checkbox-group 使用

# 基本使用

<template>
  <view class="checkbox-bar-demo">
    <ui-form-checkbox-bar v-model="checked" label="选项1" />
    <ui-form-checkbox-bar v-model="checked2" label="选项2" type="success" />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(false)
const checked2 = ref(true)
</script>

<style scoped>
.checkbox-bar-demo {
  padding: 20px;
  display: flex;
  gap: 16px;
}
</style>

# Props

参数	类型	默认值	说明
`type`	`String`	`'primary'`	类型/主题，可选值：`default`、`primary`、`success`、`warning`、`danger`、`info`、`fail`
`modelValue`	`String/Object/Number/Boolean/Array`	`{}`	绑定值（v-model）
`label`	`String/Object/Number/Boolean`	`{}`	显示文本/标识值，在 group 模式下作为选中值的标识
`indeterminate`	`Boolean`	`null`	设置 indeterminate 状态，只负责样式控制
`disabled`	`Boolean`	`false`	是否禁用
`checked`	`Boolean`	`false`	当前是否勾选
`name`	`String`	`''`	原生 name 属性
`border`	`Boolean`	`false`	是否显示边框
`trueLabel`	`String/Number`	`null`	选中时的值
`falseLabel`	`String/Number`	`null`	没有选中时的值
`id`	`String`	`null`	原生 id 属性
`controls`	`String`	`''`	当 indeterminate 为真时，关联的 checkbox 的 id
`checkedStyle`	`Object`	`{}`	选中时的自定义样式
`uncheckedStyle`	`Object`	`{}`	未选中时的自定义样式
`icon`	`String`	`''`	图标类名（选中/未选中通用）
`checkedIcon`	`String`	`''`	选中时的图标类名
`uncheckedIcon`	`String`	`''`	未选中时的图标类名
`size`	`String`	`''`	尺寸，可选值：`''`、`mini`、`xs`、`sm`、`lg`

# Events

事件名	说明	回调参数
`change`	选中状态变化时触发	`(value, name, event)`

# Slots

名称	说明
`default`	复选框标签内容，若未使用插槽则显示 label 值

# 示例

# 配合复选框组使用

<template>
  <view class="checkbox-bar-group-demo">
    <ui-form-checkbox-group v-model="selectedValues">
      <ui-form-checkbox-bar label="标签1" value="1" />
      <ui-form-checkbox-bar label="标签2" value="2" type="success" />
      <ui-form-checkbox-bar label="标签3" value="3" type="warning" />
      <ui-form-checkbox-bar label="标签4" value="4" type="danger" />
    </ui-form-checkbox-group>
    <text>选中值：{{ selectedValues }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedValues = ref([])
</script>

# 自定义图标

<template>
  <view class="checkbox-bar-icon-demo">
    <ui-form-checkbox-bar
      v-model="checked"
      label="自定义图标"
      checkedIcon="icon-zhengque"
      uncheckedIcon="icon-cuowu"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

# 禁用状态

<template>
  <view class="checkbox-bar-disabled-demo">
    <ui-form-checkbox-bar v-model="checked" label="禁用状态" disabled />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(true)
</script>

# 平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

# 注意事项

配合 ui-form-checkbox-group 使用时，label 属性作为选中值的标识
checkedStyle 和 uncheckedStyle 可分别自定义选中和未选中状态的样式
icon 属性为通用图标，checkedIcon 和 uncheckedIcon 优先级更高
trueLabel 和 falseLabel 可自定义选中/未选中时 v-model 绑定的值

← ui-form-checkbox+复选框组件 ui-form-checkbox-group 复选框组组件 →