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>
|
||||
</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',
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user