Checkbox 多选框
代码演示
基础用法
简单的是非选择，可以使用 checkbox 组件。
查看代码 < />
<template>
<w-checkbox v-model="value">今日就诊</w-checkbox>
</template>
<script>
export default {
data () {
return {
value: true
}
}
}
</script>绑定true-value、false-value
value默认情况下是取e.target.checked的值，取值范围为true或false，如果你期望自定义选中与未选中时的值，可以传入true-value，false-value。
查看代码 < />
<template>
<w-checkbox v-model="value"
true-value="a" false-value="b">
今日就诊
</w-checkbox>
</template>
<script>
export default {
data () {
return {
value: 'b'
}
}
}
</script>禁用状态
为组件添加 disabled 属性即可禁用多选框。
查看代码 < />
<template>
<w-checkbox v-model="value1" disabled>今日就诊</w-checkbox>
<w-checkbox v-model="value2" disabled>我的患者</w-checkbox>
<br />
<w-checkbox-group v-model="value" style="margin-top: 16px;" disabled>
<w-checkbox :label="1">我的患者</w-checkbox>
<w-checkbox :label="2">本科室</w-checkbox>
<w-checkbox :label="3">本地区</w-checkbox>
<w-checkbox :label="4">本省市</w-checkbox>
<w-checkbox :label="5">其他地区</w-checkbox>
</w-checkbox-group>
</template>
<script>
export default {
data () {
return {
value: [1, 2, 3],
value1: false,
value2: true
}
}
}
</script>多选框组
使用w-checkbox-group组件包裹w-checkbox的形式就可以形成一个多选框组。
查看代码 < />
<template>
<w-checkbox-group v-model="value">
<w-checkbox :label="1">我的患者</w-checkbox>
<w-checkbox :label="2">本科室</w-checkbox>
<w-checkbox :label="3">本地区</w-checkbox>
<w-checkbox :label="4" disabled>本省市</w-checkbox>
<w-checkbox :label="5" disabled>其他地区</w-checkbox>
</w-checkbox-group>
</template>
<script>
export default {
data () {
return {
value: [1, 2, 5]
}
}
}
</script>全选
使用indeterminate属性可以实现全选效果。
查看代码 < />
<template>
<div>
<div style="margin-bottom: 15px;">
<w-checkbox v-model="checkAll"
:indeterminate="indeterminate"
@change="handleCheckAllChange">全选</w-checkbox>
</div>
<w-checkbox-group v-model="checked" @change="handleCheckGroupChange">
<w-checkbox v-for="(o, index) in options"
:key="index" :label="o.label">{{o.value}}</w-checkbox>
</w-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checkAll: false,
indeterminate: true,
checked: [1, 2],
options: [{
label: 1,
value: '我的患者'
}, {
label: 2,
value: '本科室'
}, {
label: 3,
value: '本地区'
}]
}
},
methods: {
handleCheckAllChange (val) {
this.indeterminate = false
this.checked = val ? this.options.map(item => item.label) : []
},
handleCheckGroupChange (val) {
let checkedCount = val.length
this.checkAll = this.options.length === checkedCount
this.indeterminate = checkedCount > 0 && checkedCount < this.options.length
}
}
}
</script>有边框的多选框
为 w-checkbox组件添加 border属性即可让多选框拥有描边效果。
查看代码 < />
<template>
<w-checkbox-group v-model="value">
<w-checkbox :label="1" border>正在就诊</w-checkbox>
<w-checkbox :label="2" border>未就诊</w-checkbox>
<w-checkbox :label="3" border disabled>已就诊</w-checkbox>
</w-checkbox-group>
</template>
<script>
export default {
data () {
return {
value: [1]
}
}
}
</script>可选个数限制
为组件添加 max 和 min 属性即可限制多选框的选择项目数的上限与下限。
查看代码 < />
<template>
<w-checkbox-group v-model="multiple" :max="3" :min="1">
<w-checkbox :label="1">病历</w-checkbox>
<w-checkbox :label="2">检验</w-checkbox>
<w-checkbox :label="3">检查</w-checkbox>
<w-checkbox :label="4">处方</w-checkbox>
</w-checkbox-group>
</template>
<script>
export default {
data () {
return {
multiple: [1]
}
}
}
</script>API
Checkbox 、Checkbox-Button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| border | 是否加边框样式(仅checkbox生效) | Boolean | — | false | |
| checked | 当前是否勾选 | Boolean | — | false | |
| disabled | 是否禁用 | Boolean | — | false | |
| false-value | 多选框未被选中时的值 | String / Number | — | — | v1.4.4 |
| label | 选中值（只有在checkbox-group时有效） | String / Number / Boolean | — | — | |
| name | 原生 name 属性 | String | — | — | |
| true-value | 多选框被选中时的值 | String / Number | — | — | v1.4.4 |
| value / v-model | 绑定值 | String / Boolean / Number | — | — |
Checkbox 、Checkbox-Button Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | 更新后的值 |
Checkbox-Group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| discrete | 按钮组是否离散(按钮不相连) | Boolean | — | — | v1.7.10 |
| disabled | 是否禁用 | Boolean | — | false | v1.7.12 |
| max | 可被勾选的最大项数 | Number | — | — | |
| min | 可被勾选的最小项数 | Number | — | — | |
| plain | 轻量级按钮组 | Boolean | — | — | v1.5.1 |
| round | 圆角按钮样式(仅按钮样式组可用) | Boolean | — | — | v1.5.0 |
| value / v-model | 绑定值 | Array | — | — |
Checkbox-Group Events
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| change | 当绑定值变化时触发的事件 | 更新后的值 |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |