# Checkedbox 复选框

# 介绍

表单组件，有选中与非选中两种状态，详细介绍见快速上手。

# 引入

在 main.js 中引入

// 引入组件库
import VsCheckbox from 'visn/packages/vs-checkbox'
// 组件按需引入注册
VsCheckbox.install(Vue)

1
2
3
4

# 使用

引入组件后，可以在Vue文件中使用，可以单选可以多选，多选需配合vs-checkbox-group组件使用，在其内部插槽加入数个vs-checkbox组件。

多选还需要引入vs-checkbox-group组件，本节会同时讲解vs-checkbox和vs-checkbox-group的使用：

// 引入组件库
import VsCheckboxGroup from 'visn/packages/vs-checkbox-group'
// 组件按需引入注册
VsCheckboxGroup.install(Vue)

1
2
3
4

<vs-checkbox>独个</vs-checkbox> <!-- 单独使用 -->

<vs-checkbox-group>
    <vs-checkbox>复选框</vs-checkbox> <!--搭配使用-->
</vs-checkbox-group>

1
2
3
4
5

# 代码演示

# 基础用法

checked属性为布尔值，默认为true，即勾选状态；设置为false则为未选中状态。通过单击选框在状态之间切换。

独个

# 选框外形

字符串类型，支持square和round，默认为round圆形边框，square为方形边框；

<vs-checkbox>默认为圆形</vs-checkbox>
<vs-checkbox shape='square'>方形边框</vs-checkbox>

1
2

默认为圆形

方形边框

# 勾选类型

有时候选中并不意味着确定，同时可以表示排除。checkbox便支持勾选表示确定和排除两种形式。由type属性决定，tick表示确定，背景为蓝色样式为✔，cross表示排除，背景为红色为×。

<vs-checkbox>默认为确定</vs-checkbox>
<vs-checkbox type='tick'>仍为确定</vs-checkbox>
<vs-checkbox type='cross'>排除状态</vs-checkbox>

1
2
3

确定

排除

# 复选框组

复选框和复选框组搭配使用可以实现更多功能，同时实现对内所有复选框状态的掌控。vs-checkbox传入vs-checkbox-group内部的slot插槽。checkedList属性需要绑定一个数组，数组的每一个元素为对象，每一个对象对应一个复选框，含有name和checked属性。

<vs-checkbox-group :checkedList="[{name: 'a', checked: true}, {name: 'b', checked: true}]">
    <vs-checkbox name="a">复选框 a</vs-checkbox>
    <vs-checkbox name="b">复选框 b</vs-checkbox>
</vs-checkbox-group>

1
2
3
4

# 排列方式

将direction属性设置为horizontal后，复选框组里的复选框水平排列，自动换行。

<vs-checkbox-group direction="horizontal" :checkedList="checkedlist">
    <vs-checkbox name="a">复选框 a</vs-checkbox>
    <vs-checkbox name="b">复选框 b</vs-checkbox>
</vs-checkbox-group>

1
2
3
4

# 全选与反选

通过CheckboxGroup实例上的selectAll方法可以实现全选，inverse方法可以实现反选。

<vs-checkbox-group ref="group" :checkedList="checkedlist">
    <vs-checkbox name="a">复选框 a</vs-checkbox>
    <vs-checkbox name="b">复选框 b</vs-checkbox>
    <vs-checkbox name="c">复选框 c</vs-checkbox>
</vs-checkbox-group>
<vs-button @click="selectAll">全选</vs-button>
<vs-button @click="inverse">反选</vs-button>

1
2
3
4
5
6
7

复选框 a

复选框 b

复选框 c

全选

反选

export default {
    data() {
        return {
            checkedlist: [
                {name: 'a', checked: true}, 
                {name: 'b', checked: true}, 
                {name: 'c', checked: true},
            ],
        }
    },
    methods: {
        selectAll() {
            this.$refs.group.selectAll()
        },
        inverse() {
            this.$refs.group.inverse()
        },
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

← Switch 开关 Stepper 步进器 →