小鹅通组件

# Checkbox 多选框

一组备选项中进行多选

# 初始化

单独引入时：在入口js文件处引入

import { Checkbox } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Checkbox)
1
2
3

# 效果


备选项 
<ss-checkbox v-model="checked1">备选项</ss-checkbox>
1

# 禁止状态


checkbox checkbox 
<ss-checkbox v-model="noCheck" disabled>checkbox</ss-checkbox>
<ss-checkbox v-model="checked2" disabled>checkbox</ss-checkbox>
1
2

# 多选框组尺寸 - 带边框


default small mini 
<ss-checkbox v-model="checked3" border>default</ss-checkbox>
<ss-checkbox v-model="checked4" size="small" border>small</ss-checkbox>
<ss-checkbox v-model="checked5" size="mini" border>mini</ss-checkbox>
1
2
3
4

# 半选状态


全选 选项1 选项2 选项3 
<ss-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</ss-checkbox>
<ss-checkbox-group v-model="checkedValue" @change="handleCheckedCitiesChange">
  <ss-checkbox v-for="item in checkOption" :label="item" :key="item">
    {{item}}
  </ss-checkbox>
</ss-checkbox-group>

export default {
    data() {
      return {
        checked1: true,
        checked2: true,
        checked3: true,
        checked4: true,
        checked5: true,
        noCheck: false,
        isIndeterminate: true,
        checkAll: false,
        checkedValue: ['选项1'],
        checkOption: ['选项1','选项2','选项3'],
      };
    },
    methods: {
       handleCheckAllChange(val) {
        console.log('全选：',val)
        this.checkedValue = val ? this.checkOption : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        console.log('全选--当前选中：', value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.checkOption.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkOption.length;
      }
    }
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 参数

参数 说明 类型 默认值 可选值
value checkbox状态 String — —
disabled 是否禁用 Boolean false —
checked 当前是否勾选 Boolean false —
defaultChecked 默认勾选 Boolean false —
indeterminate 设置 indeterminate 状态，只负责样式控制 Boolean false —
name 原生 name 属性 String — —
size Checkbox 的尺寸 String — small

# 事件

事件名称 说明 回调参数
input 当绑定值变化时触发的事件 更新后的值
change 当绑定值变化时触发的事件 更新后的值

← Dropdown 下拉菜单 →