Checkbox 复选框

使用指南

复选框

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      基本用法
    </p>
    <h3-checkbox value="测试" />
    <h3-checkbox value="测试" disabled />
    <h3-checkbox value="测试" indeterminate />
    <h3-checkbox value="测试" checked>
      测试
    </h3-checkbox>
    <h3-checkbox value="测试" mode="item" />
    <p class="sub-title">
      插槽 点击阻止默认事件及冒泡事件可以不触发默认事件
    </p>
    <h3-checkbox @change="agreeItemChange" value="agree" label="同意">
      同意<a @click.prevent.stop="agreeFn($event)" style="color:blue">&lt;&lt;阅读条款&gt;&gt;</a>
    </h3-checkbox>
    <p class="sub-title">
      在 h3-checkbox-group 下使用 适合跟field 或 popup-modal组合使用 (垂直布局)
    </p>
    <h3-checkbox-group v-model="checkboxs" layout="vertical">
      <h3-checkbox :key="item" v-for="item in checkboxListopions" :value="item" />
    </h3-checkbox-group>
    <p class="sub-title">
      在 h3-checkbox-group 下使用 适合跟field组合使用(水平布局)
    </p>
    <h3-checkbox-group v-model="checkboxs1" layout="horizontal">
      <h3-checkbox
        :key="item.value"
        v-for="item in checkboxListopions1"
        :value="item.value"
        :label="item.label"
      />
    </h3-checkbox-group>
    <p class="sub-title">
      在 h3-checkbox-group 下使用 不使用内置的全选
    </p>
    <h3-checkbox-group v-model="checkboxs2" :all="false">
      <h3-checkbox label="全部" all />
      <h3-checkbox
        :key="item.value"
        v-for="item in checkboxListopions1"
        :value="item.value"
        :label="item.label"
      />
    </h3-checkbox-group>
    <p class="sub-title">
      在 h3-checkbox-group 组级别disabled
    </p>
    <h3-checkbox-group v-model="checkboxs3" disabled>
      <h3-checkbox
        :key="item.value"
        v-for="item in checkboxListopions1"
        :value="item.value"
        :label="item.label"
      />
    </h3-checkbox-group>
    <p class="sub-title">
      在 h3-checkbox-group 包含子项disabled 且选中
    </p>
    <h3-checkbox-group v-model="checkboxs4">
      <h3-checkbox
        :key="item.value"
        v-for="item in checkboxListopions1"
        :value="item.value"
        :label="item.label"
      />
      <h3-checkbox label="额外" value="key5" disabled />
    </h3-checkbox-group>
    <p class="sub-title">
      在 h3-checkbox-group 包含子项disabled 且未选中
    </p>
    <h3-checkbox-group v-model="checkboxs5">
      <h3-checkbox
        :key="item.value"
        v-for="item in checkboxListopions1"
        :value="item.value"
        :label="item.label"
      />
      <h3-checkbox label="额外" value="key5" disabled />
    </h3-checkbox-group>
    <p class="sub-title">
      在 h3-checkbox-group 只能选择2项
    </p>
    <h3-checkbox-group v-model="checkboxs6" :limit="2" @change="checkboxs6change">
      <h3-checkbox
        :key="item.value"
        v-for="item in checkboxListopions1"
        :value="item.value"
        :label="item.label"
      />
    </h3-checkbox-group>
    <span>{{ checkboxs6Label }}</span>
  </div>
</template>
<script>
import H3Checkbox from '@/components/h3-checkbox';

export default {
  name: 'DemoCheckbox',
  components: {
    H3Checkbox,
    H3CheckboxGroup: H3Checkbox.Group,
  },
  props: {},
  data () {
    return {
      checkboxs: ['小学', '高中', '奥哲氚云研发中心奥哲氚云研发中心深圳大学'],
      checkboxs1: ['key1', 'key2', 'key3'],
      checkboxs2: ['key1', 'key2', 'key3'],
      checkboxs3: ['key1', 'key2', 'key3'],
      checkboxs4: ['key1', 'key2', 'key3', 'key5'],
      checkboxs5: ['key1', 'key2', 'key3'],
      checkboxs6: ['key2', 'key3'],
      checkboxs6Label: ['高中', '中科大'],
      checkboxListopions: [
        '小学',
        '高中',
        '人大',
        '浙大',
        '复旦',
        '北航',
        '上交',
        '奥哲氚云研发中心奥哲氚云研发中心深圳大学',
        '中科大',
        '武大',
      ],
      checkboxListopions1: [
        {
          value: 'key1',
          label: '奥哲氚云研发中心奥哲氚云研发中心深圳大学',
        },
        {
          value: 'key2',
          label: '高中',
        },
        {
          value: 'key3',
          label: '中科大',
        },
        {
          value: 'key4',
          label: '武大',
        },
      ],
    };
  },
  methods: {
    agreeFn () {
      console.log('点击了同意条款!');
    },
    agreeItemChange (checked, value, label) {
      console.log('agree change....', checked, value, label);
    },
    checkboxs6change (value, label) {
      this.checkboxs6Label = label;
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库输入框与field组件过于耦合，因此新组件单独做成一个纯粹的checkbox的组件，同时提供checkbox-group组件，来增强使用性。

弃用 h3-agree-item h3-checkbox-item h3-checkbox-list 组件。

若要做迁移请参考

1. 弃用的props：showMode options title defaultValue required editable tip defaultChecked returnValue onChange
2. 替换的props：
3. 新增的props：all indeterminate label

API

Prop Checkbox

属性	说明	类型	默认值
value	checkbox对应的value，在h3-checkbox-group组件内必须存在，通过该值与h3-checkbox-group的value比较是否选择	string|number|boolean	-
label	呈现的选项值，若无则取value	string|number|boolean	-
name	DOM元素的name	string	-
checked	是否选中，v-model绑定值，在h3-checkbox-group组件下无效	boolean	false
indeterminate	半选状态，需要手动控制，在h3-checkbox-group组件下无效	boolean	false
disabled	是否禁用	boolean	false
mode	呈现标签样式tag还是列表项样式item，在h3-checkbox-group组件下无效	string	'tag'
all	是否全选类型的checkbox	boolean	false
control	是否自行控制checked，在h3-checkbox-group组件下无效	boolean	false

Event Checkbox

事件名	说明	参数
click	点击事件触发的回调函数，返回checked的值是点击时组件是否checked的值	(checked: boolean, value: string|number|boolean, label: string|number|boolean, isAll: boolean)
input	change事件触发的回调函数，v-model绑定事件，control:true下失效	(checked: boolean)
change	点击触发事件，在h3-checkbox-group组件下无效	(checked: boolean, value: string|number|boolean, label: string|number|boolean, isAll: boolean)

Prop CheckboxGroup

参数	说明	类型	默认值
value	value，v-model绑定值	array	[]
limit	限制选中数量	number	-
auto	限制上限生效即limit=true，是否自动取消之前选中的一个，勾选当前一个	boolean	true
disabled	是否组级别禁用	boolean	false
name	组内DOM元素的name	string	-
all	是否呈现内置的全选类型的checkbox，若设置了limit将不呈现	boolean	false
allValue	内置全选类型的checkbox的value	string	'H3_CHECKBOX_ALL_VALUE'
allLabel	内置全选类型的checkbox的label	string	'全选'
layout	布局，可选值：horizontal | vertical	string	'horizontal'

Event CheckboxGroup

事件名	说明	参数
input	变化时触发，v-model绑定事件	选中的数据(value:array)
change	点击触发事件	选中的数据(value:array, label:array)
outLimit	限制上限生效即limit=true，如果选项超过限制是触发事件	选中的数据(value:array, label:array)