Tantalum UI

Appearance

Return to top
On this page

Checkbox/CheckboxGroup 多选项

vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="默认">
      <ta-checkbox />
    </ta-cell>
    <ta-cell label="带文案">
      <ta-checkbox v-model:checked="checked">勾选</ta-checkbox>
    </ta-cell>
    <ta-cell label="默认激活">
      <ta-checkbox checked>勾选</ta-checkbox>
    </ta-cell>
    <ta-cell label="自定义颜色">
      <ta-checkbox checked activeColor="#8b1721">勾选</ta-checkbox>
    </ta-cell>
    <ta-cell label="禁用">
      <ta-checkbox disabled>勾选</ta-checkbox>
    </ta-cell>
  </ta-group>
  <ta-group title="CheckboxGroup">
    <ta-cell label="默认">
      <ta-checkbox-group v-model="groupValue">
        <ta-checkbox v-for="item in groups" :key="item" :checkedValue="item">{{
          item
        }}</ta-checkbox>
      </ta-checkbox-group>
    </ta-cell>
    <ta-cell label="内联">
      <ta-checkbox-group v-model="groupValue" inline activeColor="#8b1721">
        <ta-checkbox v-for="item in groups" :key="item" :checkedValue="item">{{
          item
        }}</ta-checkbox>
      </ta-checkbox-group>
    </ta-cell>
    <ta-cell label="禁用">
      <ta-checkbox-group :modelValue="['A']" disabled>
        <ta-checkbox v-for="item in groups" :key="item" :checkedValue="item">{{
          item
        }}</ta-checkbox>
      </ta-checkbox-group>
    </ta-cell>
    <ta-cell label="通过options设置">
      <ta-checkbox-group v-model="groupValue" :options="groups" />
    </ta-cell>
  </ta-group>
  <ta-group title="CheckboxGroup + Cell">
    <ta-checkbox-group v-model="groupValue">
      <ta-cell v-for="item in groups" :key="item" :label="'单元格 ' + item">
        <template #icon>
          <ta-checkbox circle :checkedValue="item" />
        </template>
      </ta-cell>
    </ta-checkbox-group>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="change">
      <ta-checkbox-group @change="onChange">
        <ta-checkbox v-for="item in groups" :key="item" :checkedValue="item">{{
          item
        }}</ta-checkbox>
      </ta-checkbox-group>
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { showToast } from '@/index'

export default defineComponent({
  name: 'ExpCheckbox',
  setup() {
    const checked = ref(false)
    const groupValue = ref(['A', 'C'])
    const groups = ref(['A', 'B', 'C'])

    function onChange(value: (string | number)[]) {
      console.log('change', value)
      showToast(`Change Value: ${value}`)
    }

    return {
      checked,
      groupValue,
      groups,

      onChange
    }
  }
})
</script>

Import

js
import { TaCheckbox, TaCheckboxGroup } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { CheckboxOptionItem } from 'tantalum-ui-mobile'

Checkbox

Checkbox Props

属性类型默认值必填说明
v-model:checkedbooleanfalse否当前是否选中，可用来设置默认选中
checked-valuestring | number''否该项值，CheckboxGroup 的 change 事件会携带 checkbox 的 checkedValue
disabledbooleanfalse否是否禁用
circlebooleanfalse否是否显示圆形的图标
active-colorstring否自定义激活态的图标颜色

Checkbox Events

事件名称描述回调函数参数
checked-change勾选发生改变时触发checked: boolean

Checkbox Slots

vue
<ta-checkbox>开朗</ta-checkbox>
<ta-checkbox>活泼</ta-checkbox>

CheckboxGroup

注：

  • 内部由多个 Checkbox 组成。
  • 支持表单，具体可参考 Form。

CheckboxGroup Props

属性类型默认值必填说明
v-model(string | number)[][]否当前选择子项的 value 列表
namestring否标识
inlinebooleanfalse否是否使用内联布局，默认纵向布局
active-colorstring否自定义子项激活态的图标颜色
optionsCheckboxOptionItem[]否子项配置，优先级低于 slot 放入 Checkbox 组件

CheckboxOptionItem

key类型默认值必填说明
valuestring | number是值， 同 Checkbox 组件 value
labelstring是描述，同 Checkbox 组件 slot default

CheckboxGroup Events

事件名称描述回调函数参数
change选中项发生改变时触发value: (string | number)[]

CheckboxGroup Slots

#default

vue
<ta-checkbox-group>
  <ta-checkbox>开朗</ta-checkbox>
  <ta-checkbox>活泼</ta-checkbox>
</ta-checkbox-group>