vant/docs/examples-docs/checkbox.md

<style> @component-namespace demo { @b checkbox { .van-checkbox-wrapper { padding: 0 20px; .van-checkbox { margin: 10px 0; } } } } </style> <script> export default { data() { return { checkbox1: true, checkbox2: true, list: [ 'a', 'b', 'c' ], result: ['a', 'b'] }; }, watch: { result(val) { console.log(val); } } }; </script>

Checkbox 复选框

使用指南

如果你已经按照快速上手中引入了整个vant，以下组件注册就可以忽略了，因为你已经全局注册了vant中的全部组件。

全局注册

你可以在全局注册Checkbox组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Checkbox组件了：

import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
import 'vant/lib/vant-css/checkbox.css';

Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Checkbox组件，这样只能在你注册的组件中使用Checkbox：

import { Checkbox, CheckboxGroup } from 'vant';

export default {
  components: {
    'van-checkbox': Checkbox,
    'van-checkbox-group': CheckboxGroup
  }
};

代码演示

基础用法

通过v-model绑定值即可。当Checkbox选中时，绑定的值即为true，否则为false。当单个Checkbox使用时，更建议使用Switch组件。

:::demo 基础用法

<div class="van-checkbox-wrapper">
  <van-checkbox v-model="checkbox1">复选框1</van-checkbox>
</div>

<script>
export default {
  data() {
    return {
      checkbox1: true
    };
  }
}; 
</script>

:::

禁用状态

设置disabled属性即可，此时Checkbox不能点击。

:::demo 禁用状态

<div class="van-checkbox-wrapper">
  <van-checkbox v-model="checkbox2">复选框2</van-checkbox>
</div>

<script>
export default {
  data() {
    return {
      checkbox2: true
    };
  }
}; 
</script>

:::

Checkbox组

需要与van-checkbox-group一起使用，值通过v-model绑定在van-checkbox-group上，例如下面的result，此时result的值是一个数组。数组中的项即为选中的Checkbox的name属性设置的值。

:::demo Checkbox组

<div class="van-checkbox-wrapper">
  <van-checkbox-group v-model="result">
    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
  </van-checkbox-group>
</div>

<script>
export default {
  data() {
    return {
      list: [
        'a',
        'b',
        'c'
      ],
      result: ['a', 'b']
    };
  },

  watch: {
    result(val) {
      console.log(val);
    }
  }
};
</script>

:::

禁用Checkbox组

禁用van-checkbox-group，此时整个组都不可点击。

:::demo 禁用Checkbox组

<div class="van-checkbox-wrapper">
  <van-checkbox-group v-model="result" disabled>
    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
  </van-checkbox-group>
</div>

<script>
export default {
  data() {
    return {
      list: [
        'a',
        'b',
        'c'
      ],
      result: ['a', 'b']
    };
  }
};
</script>

:::

与Cell组件一起使用

此时你需要再引入Cell和CellGroup组件。

:::demo 与Cell组件一起使用

<van-checkbox-group v-model="result">
  <van-cell-group>
    <van-cell v-for="item in list">
      <van-checkbox :name="item">复选框{{item}}</van-checkbox>
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

<script>
export default {
  data() {
    return {
      list: [
        'a',
        'b',
        'c'
      ],
      result: ['a', 'b']
    };
  }
};
</script>

:::

Checkbox API

参数	说明	类型	默认值	可选值
disabled	是否禁用单选框	boolean	false
name	根据这个来判断radio是否选中	boolean	false

CheckboxGroup API

参数	说明	类型	默认值	可选值
disabled	是否禁用单选框	boolean	false

CheckboxGroup Event

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	当前组件的值