JView UI

Appearance

  • Checkbox 多选框组件，用于多选场景。
  • 在单独使用时，也可以用于两种状态之间的切换，与 Switch 组件类似的用法，但是通常 Switch 在交互时会直接触发状态的改变，而 Checkbox 需要配合表单提交操作。

基本展示 ​

Checkbox
展开查看代码
vue
<template>
    <j-checkbox v-model:checked="checked">Checkbox</j-checkbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(false)
</script>
<template>
    <j-checkbox v-model:checked="checked">Checkbox</j-checkbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

禁用状态 ​

通过disabled控制禁用状态。

Checkbox1Checkbox2
展开查看代码
vue
<template>
    <j-checkbox v-model:checked="checked1" :disabled="disabled">Checkbox1</j-checkbox>
    <j-checkbox v-model:checked="checked2" :disabled="disabled">Checkbox2</j-checkbox>
    <j-button size="small" @click="onToggle" style="margin-top: 10px">Toggle Disabled</j-button>
</template>

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

const checked1 = ref(true)

const checked2 = ref(false)

const disabled = ref(true)
const onToggle = () => {
    disabled.value = !disabled.value
}
</script>
<template>
    <j-checkbox v-model:checked="checked1" :disabled="disabled">Checkbox1</j-checkbox>
    <j-checkbox v-model:checked="checked2" :disabled="disabled">Checkbox2</j-checkbox>
    <j-button size="small" @click="onToggle" style="margin-top: 10px">Toggle Disabled</j-button>
</template>

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

const checked1 = ref(true)

const checked2 = ref(false)

const disabled = ref(true)
const onToggle = () => {
    disabled.value = !disabled.value
}
</script>

多个选项 ​

通过 CheckboxGroup 组件组织多个选项，支持多选。

选项1选项2选项3
展开查看代码
vue
<template>
    <j-checkbox-group v-model:value="value">
        <j-checkbox :value="1">选项1</j-checkbox>
        <j-checkbox :value="2">选项2</j-checkbox>
        <j-checkbox :value="3">选项3</j-checkbox>
    </j-checkbox-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])
</script>
<template>
    <j-checkbox-group v-model:value="value">
        <j-checkbox :value="1">选项1</j-checkbox>
        <j-checkbox :value="2">选项2</j-checkbox>
        <j-checkbox :value="3">选项3</j-checkbox>
    </j-checkbox-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

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

全选示例 ​

一个支持全选和半选中状态的示例。

全选
选项1选项2选项3
展开查看代码
vue
<template>
    <div>
        <j-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">全选</j-checkbox>
        <j-checkbox-group v-model:value="value" @change="onValueChange" style="margin-top: 10px">
            <j-checkbox :value="1">选项1</j-checkbox>
            <j-checkbox :value="2">选项2</j-checkbox>
            <j-checkbox :value="3">选项3</j-checkbox>
        </j-checkbox-group>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checkAll = ref(false)

const indeterminate = ref(false)

const value = ref<number[]>([])

const onCheckAllChange = (val: number) => {
    if (val) {
        value.value = [1, 2, 3]
    } else {
        value.value = []
    }
    indeterminate.value = false
}

const onValueChange = (value: number[]) => {
    if (value.length === 3 || value.length === 0) {
        indeterminate.value = false
        if (value.length === 3) {
            checkAll.value = true
        } else {
            checkAll.value = false
        }
    } else {
        indeterminate.value = true
        checkAll.value = false
    }
}
</script>
<template>
    <div>
        <j-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">全选</j-checkbox>
        <j-checkbox-group v-model:value="value" @change="onValueChange" style="margin-top: 10px">
            <j-checkbox :value="1">选项1</j-checkbox>
            <j-checkbox :value="2">选项2</j-checkbox>
            <j-checkbox :value="3">选项3</j-checkbox>
        </j-checkbox-group>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checkAll = ref(false)

const indeterminate = ref(false)

const value = ref<number[]>([])

const onCheckAllChange = (val: number) => {
    if (val) {
        value.value = [1, 2, 3]
    } else {
        value.value = []
    }
    indeterminate.value = false
}

const onValueChange = (value: number[]) => {
    if (value.length === 3 || value.length === 0) {
        indeterminate.value = false
        if (value.length === 3) {
            checkAll.value = true
        } else {
            checkAll.value = false
        }
    } else {
        indeterminate.value = true
        checkAll.value = false
    }
}
</script>

Checkbox 属性 ​

参数说明类型默认值必填
checked当前是否为选中状态booleanfalse否
disabled禁用状态boolean无否
value在 checkbox-group 下起作用，根据 value 进行比较，判断是否选中boolean | string | number无否
indeterminate不确定的状态，通常用来在全选交互中描述半选中状态，但是该属性只负责控制样式，逻辑和状态需要你自行维护boolean无否

Checkbox 事件 ​

事件名说明回调类型
changechange事件(e: boolean) => void

CheckboxGroup 属性 ​

参数说明类型默认值必填
value当前选中的选项，支持多选，类型是数组Array<number | string | boolean>-否
disabled禁用状态，开启会禁用所有子项boolean无否
options通过选项配置 checkbox 子项Array<{ disabled: boolean; label: string; value: number | string | boolean }>无否

CheckboxGroup 事件 ​

事件名说明回调类型
changechange事件(e: boolean) => void

Copyright © 2022-2024 All Rights Reserved by Tusi.