mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature]Checkbox: support disabled label (#644)
This commit is contained in:
parent
0132e855cf
commit
d7403a0241
@ -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',
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user