[new feature]Checkbox: support disabled label (#644)

This commit is contained in:
ddchef 2018-02-26 14:22:29 +08:00 committed by neverland
parent 0132e855cf
commit d7403a0241
3 changed files with 21 additions and 3 deletions

View File

@ -9,6 +9,11 @@
<van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
</demo-block>
<demo-block :title="$t('labelDisabled')">
<van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
<van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
</demo-block>
<demo-block :title="$t('title3')">
<van-checkbox-group v-model="result">
<van-checkbox
@ -48,12 +53,14 @@ export default {
i18n: {
'zh-CN': {
checkbox: '复选框',
labelDisabled: '禁用 Checkbox 内容部分点击事件',
title3: 'Checkbox 组',
title4: '与 Cell 组件一起使用',
title5: '设置最大可选数',
},
'en-US': {
checkbox: 'Checkbox',
labelDisabled: 'Disable Checkbox Label click event',
title3: 'Checkbox Group',
title4: 'Inside a Cell',
title5: 'Maximum amount of checked options'
@ -64,6 +71,8 @@ export default {
return {
checkbox1: true,
checkbox2: true,
checkbox3: false,
checkbox4: true,
list: [
'a',
'b',

View File

@ -31,7 +31,11 @@ export default {
```html
<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
```
#### 禁用内容部分点击事件
```html
<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
```
#### Checkbox 组
需要与`van-checkbox-group`一起使用,选中值是一个数组,通过`v-model`绑定在`van-checkbox-group`上,数组中的项即为选中的`Checkbox``name`属性设置的值
@ -93,6 +97,7 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
| label-disabled | 是否禁用单选框内容点击 | `Boolean` | `false` | - |
| shape | 形状 | `String` | `round` | `square` |
### CheckboxGroup API

View File

@ -10,7 +10,7 @@
]"
@click="onClick"
/>
<span class="van-checkbox__label" @click="onClick">
<span class="van-checkbox__label" @click="onClick('label')">
<slot />
</span>
</div>
@ -28,6 +28,10 @@ export default create({
props: {
value: {},
disabled: Boolean,
labelDisabled: {
type: Boolean,
default: false
},
name: [String, Number],
shape: {
type: String,
@ -96,8 +100,8 @@ export default create({
},
methods: {
onClick() {
if (!this.isDisabled) {
onClick(flag) {
if (!this.isDisabled && (flag !== 'label' || (flag === 'label' && !this.labelDisabled))) {
this.currentValue = !this.currentValue;
}
}