Vant Checkbox check box

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';

Vue.use(Checkbox);
Vue.use(CheckboxGroup);

Code demo

Basic usage

Check the status of the bind check box with v-model

<van-checkbox v-model="checked">复选框</van-checkbox>

export default {
  data() {
    return {
      checked: true
    };
  }
};

The state is disabled

You can disable check boxes by setting the disabled property

<van-checkbox v-model="checked" disabled>复选框</van-checkbox>

Disable text clicking

When you set the icon-disabled property, clicking anything other than the check box icon does not trigger a switchover

<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>

Custom shapes

Set the sharpe property to square, and the shape of the check box becomes square

<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>

Custom colors

The checked-color property allows you to customize the color of the icon in the selected state

<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>

Custom size

Icon-size properties allow you to customize the size of the icon

<van-checkbox v-model="checked" icon-size="24px">复选框</van-checkbox>

Custom icons

Custom icons with icon slots allow you to tell if it is selected by slotProps

<van-checkbox v-model="checked">
  自定义图标
  <img
    slot="icon"
    slot-scope="props"
    :src="props.checked ? activeIcon : inactiveIcon"
  >
</van-checkbox>

export default {
  data() {
    checked: true,
    activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
  }
}

Check box group

Check boxes can be used with check box groups, and the selected value is an array that is bound to the Checkbox Group via v-model, with the value in the array being the name of the check box selected

<van-checkbox-group v-model="result">
  <van-checkbox name="a">复选框 a</van-checkbox>
  <van-checkbox name="b">复选框 b</van-checkbox>
  <van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>

export default {
  data() {
    return {
      result: ['a', 'b']
    };
  }
};

Set the maximum number of options

Max properties allow you to limit the maximum number of options

<van-checkbox-group v-model="result" :max="2">
  <van-checkbox name="a">复选框 a</van-checkbox>
  <van-checkbox name="b">复选框 b</van-checkbox>
  <van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>

Full and anti-election

The toggleAll method on the Checkbox Group instance enables full and anti-selection

<van-checkbox-group v-model="result" ref="checkboxGroup">
  <van-checkbox name="a">复选框 a</van-checkbox>
  <van-checkbox name="b">复选框 b</van-checkbox>
  <van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>

<van-button type="primary" @click="checkAll">全选</van-button>
<van-button type="info" @click="toggleAll">反选</van-button>

export default {
  data() {
    return {
      result: []
    }
  },

  methods: {
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    }
  }
}

Use with cell components

At this point you need to re-introduce the Cell and Cell Group components and trigger the switch via the toggle method on the Checkbox instance

<van-checkbox-group v-model="result">
  <van-cell-group>
    <van-cell
      v-for="(item, index) in list"
      clickable
      :key="item"
      :title="`复选框 ${item}`"
      @click="toggle(index)"
    >
      <van-checkbox
        :name="item"
        ref="checkboxes"
        slot="right-icon"
      />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

export default {
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    }
  }
}

Api

Checkbox Props

Parameters	Description	Type	The default
name	Identifier	any	-
shape	Shape, with an optional value of `square`	string	`round`
v-model	Whether it is selected or not	boolean	`false`
disabled	Whether to disable the check box	boolean	`false`
label-disabled	Whether to disable check box text clicking	boolean	`false`
label-position	The text position, with an optional value of `left`	string	`right`
icon-size	Icon size, the default unit `px`	number \| string	`20px`
checked-color	Check the status color	string	`#1989fa`
bind-group `v2.2.4`	Whether to bind to a check box group	boolean	`true`

CheckboxGroup Props

Parameters	Description	Type	The default
v-model	The identifier for all selected items	any[]	-
disabled	Whether to disable all check boxes	boolean	`false`
max	Maximum optional, 0 is unlimited	number \| string	`0`
icon-size `v2.2.3`	The icon size of all check boxes, the default unit is `px`	number \| string	`20px`
checked-color `v2.2.3`	The selected status color for all check boxes	string	`#1989fa`

Checkbox Events

The name of the event	Description	Callback parameters
change	The event that is triggered when the binding value changes	The value of the current component
Click	Triggered when you click the check box	event: Event

CheckboxGroup Events

The name of the event	Description	Callback parameters
change	The event that is triggered when the binding value changes	The value of the current component

Checkbox Slots

Name	Description	SlotProps
default	Custom text	-
icon	Custom icons	Checked: Whether it is selected or not

Checkbox Group method

Ref allows you to get to a CheckboxGroup instance and call the instance method, as detailed in The Component Instance Method

The method name	Description	Parameters	Returns a value
toggleAll	Switch all check boxes, pass `true` check, `false` not pass on to reverse	checked?: boolean	-

Checkbox method

Ref allows you to get to the Checkbox instance and call the instance method, as detailed in The Component Instance Method

The method name	Description	Parameters	Returns a value
toggle	Switch the selected state, `true` is selected, `false` is unchecked, and no pass-through is reversed	checked?: boolean	-