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

View File

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

View File

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