TnCheckbox-复选框

复选框一般用于表示多个选项中的一个或多个状态。例如，一个任务清单的每一项都可以是未完成的，也可以是已完成的。

复选框也可用于状态的开关，这时它的含义就和单选框类似了，但是单选框不能取消这个选择。

组件位置

nodeuni_modules

typescript

import TnCheckbox from '@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox.vue'
import TnCheckboxGroup from '@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox-group.vue'

import TnCheckbox from '@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox.vue'
import TnCheckboxGroup from '@tuniao/tnui-vue3-uniapp/components/checkbox/src/checkbox-group.vue'

typescript

import TnCheckbox from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue'
import TnCheckboxGroup from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox-group.vue'

import TnCheckbox from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue'
import TnCheckboxGroup from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox-group.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基本使用

通过v-model设置选中的值
通过label设置选项(选中)的值，在配合TnCheckboxGroup时，会通过传递给TnCheckboxGroup的v-model进行比较，相同则选中
通过disabled设置是否禁用
通过size设置单选框的尺寸，可选值为sm、lg
通过active-color设置选中时的颜色
通过border设置是否显示边框
通过disabled设置单选框禁止选择，如果设置了TnCheckboxGroup的disabled，则会覆盖TnCheckbox的disabled

单`TnCheckbox`使用

vue

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref(false)
</script>

<template>
  <TnCheckbox v-model="agent">同意协议</TnCheckbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref(false)
</script>

<template>
  <TnCheckbox v-model="agent">同意协议</TnCheckbox>
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref(false)
</script>

<template>
  <TnCheckbox v-model="agent" disabled>不同意</TnCheckbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref(false)
</script>

<template>
  <TnCheckbox v-model="agent" disabled>不同意</TnCheckbox>
</template>

`TnCheckbox`配合`TnCheckboxGroup`使用

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>(['value1'])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue">
    <TnCheckbox label="value1">value1</TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>(['value1'])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue">
    <TnCheckbox label="value1">value1</TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>(['value1'])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue" border>
    <TnCheckbox label="value1">value1</TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>(['value1'])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue" border>
    <TnCheckbox label="value1">value1</TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

禁止点击标签进行选择

设置label-disabled为true，则点击标签不会触发选中

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>([])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue" label-disabled>
    <TnCheckbox label="value1">value1</TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>([])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue" label-disabled>
    <TnCheckbox label="value1">value1</TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

修复单个复选框时选中和未选中的值

通过active-value和inactive-value设置选中和未选中的值

vue

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref<number>(0)
</script>

<template>
  <TnCheckbox v-model="agent" :active-value="1" :inactive-value="0"
    >同意协议</TnCheckbox
  >
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref<number>(0)
</script>

<template>
  <TnCheckbox v-model="agent" :active-value="1" :inactive-value="0"
    >同意协议</TnCheckbox
  >
</template>

修改复选框的选框形状

通过checked-shape参数修改选框的形状为正方形和圆形，分别对应的参数是square、circle

vue

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref<boolean>(false)
</script>

<template>
  <TnCheckbox v-model="agent" checked-shape="circle">同意协议</TnCheckbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const agent = ref<boolean>(false)
</script>

<template>
  <TnCheckbox v-model="agent" checked-shape="circle">同意协议</TnCheckbox>
</template>

通过`slot`自定义内容

设置slot名为left的插槽可以将单选框放置在内容的右侧

默认的slot是将内容放在单选框的左侧

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>([])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue">
    <TnCheckbox label="value1">
      <template #left>value1</template>
    </TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref<string[]>([])
</script>

<template>
  <TnCheckboxGroup v-model="selectValue">
    <TnCheckbox label="value1">
      <template #left>value1</template>
    </TnCheckbox>
    <TnCheckbox label="value2">value2</TnCheckbox>
  </TnCheckboxGroup>
</template>

API

Checkbox Props

属性名	说明	类型	默认值	可选值
model-value/v-model	单个复选框绑定的值	String \| Number ｜ Boolean	-	-
label	复选框的值，在使用复选组时，checkbox 的值就是 label	String \|Number	-	-
indeterminate	用于标记当前复选框是否为不确定状态	Boolean	`false`	`true`
active-value	复选框选中时的值	String \| Number ｜ Boolean	-	`true`
inactive-value	复选框未选中时的值	String \| Number ｜ Boolean	-	`false`
size	复选框尺寸	String	-	`sm` / `lg`
checked-shape	复选框选框的形状	String	`square`	`circle`
disabled	复选框是否禁用	Boolean	`false`	`true`
label-disabled	checkbox 禁止点击标签进行选择	Boolean	`false`	`true`
border	是否显示边框	Boolean	`false`	`true`
active-color	checkbox 激活时的颜色，以 tn 开头则使用图鸟内置的颜色只支持普通颜色	String	-	颜色
custom-style	在外部自定义组件样式	CSSProperties	{}	-
custom-class	在外部作用于组件的类	String	-	-
validate-event	值发生修改时是否触发表单验证	Boolean	`true`	`false`

Checkbox Events

事件名	说明	类型
change	选中的值发生改变	`(value: string \| number \| boolean) => void`

Checkbox Slots

插槽名	说明
default	单选默认显示的内容
left	单选左边显示的内容，这时复选按钮会在右边

CheckboxGroup Props

属性名	说明	类型	默认值	可选值
model-value/v-model	复选框组绑定的值	Array<String \|Number>	-	-
size	单选框尺寸	String	-	`sm` / `lg`
checked-shape	复选框选框的形状	String	`square`	`circle`
disabled	复选框是否禁用	Boolean	`false`	`true`
label-disabled	checkbox 禁止点击标签进行选择	Boolean	`false`	`true`
border	是否显示边框	Boolean	`false`	`true`
active-color	checkbox 激活时的颜色，以 tn 开头则使用图鸟内置的颜色只支持普通颜色	String	-	颜色
min	可被勾选的复选框最小值	Number	-	-
max	可被勾选的复选框最大值	Number	-	-
wrap	checkbox 内容是否独占一行	Boolean	`false`	`true`
validate-event	值发生修改时是否触发表单验证	Boolean	`true`	`false`

CheckboxGroup Events

事件名	说明	类型
change	选中的值发生改变	`(value: (string \| number)[]) => void`

CheckboxGroup Slots

插槽名	说明	子标签
default	自定义默认内容	`TnCheckbox`

TnCheckbox-复选框 ​

组件位置 ​

平台差异说明 ​

基本使用 ​

单TnCheckbox使用 ​

TnCheckbox配合TnCheckboxGroup使用 ​

禁止点击标签进行选择 ​

修复单个复选框时选中和未选中的值 ​

修改复选框的选框形状 ​

通过slot自定义内容 ​

API ​

Checkbox Props ​

Checkbox Events ​

Checkbox Slots ​

CheckboxGroup Props ​

CheckboxGroup Events ​

CheckboxGroup Slots ​