blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Checkbox): only the icon is clickable when label-disabled

Browse Source
This commit is contained in:
陈嘉涵 2020-01-11 08:54:07 +08:00
parent 4ed3bd4c7e
commit 3d10d42fcc
10 changed files with 82 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/checkbox/README.md
View File

@ -54,7 +54,7 @@ export default {
### Custom Icon Size
```html
<van-checkbox v-model="checked" icon-size="25px">Checkbox</van-checkbox>
<van-checkbox v-model="checked" icon-size="24px">Checkbox</van-checkbox>
```
### Custom Icon

4
src/checkbox/README.zh-CN.md
View File

@ -39,7 +39,7 @@ export default {
### 禁用文本点击
通过设置`label-disabled`属性可以禁用复选框文本点击
设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
```html
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
@ -66,7 +66,7 @@ export default {
通过`icon-size`属性可以自定义图标的大小
```html
<van-checkbox v-model="checked" icon-size="25px">复选框</van-checkbox>
<van-checkbox v-model="checked" icon-size="24px">复选框</van-checkbox>
```
### 自定义图标

2
src/checkbox/demo/index.vue
View File

@ -32,7 +32,7 @@
</demo-block>
<demo-block :title="$t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="25px">
<van-checkbox v-model="checboxIcon" icon-size="24px">
{{ $t('customIconSize') }}
</van-checkbox>
</demo-block>

8
src/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -9,13 +9,13 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox">
<div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox van-checkbox--disabled">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
</span>
</div>
<div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox">
<div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox van-checkbox--disabled">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框
@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 25px;"><i class="van-icon van-icon-success">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
自定义大小
</span>

2
src/checkbox/test/__snapshots__/index.spec.js.snap
View File

@ -27,7 +27,7 @@ exports[`icon-size prop 1`] = `
`;
exports[`label disabled 1`] = `
<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox">
<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox van-checkbox--label-disabled">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">Label</span>
</div>

82
src/mixins/checkbox.js
View File

@ -36,7 +36,9 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
},
iconStyle() {
const checkedColor = this.checkedColor || (this.parent && this.parent.checkedColor);
const checkedColor =
this.checkedColor || (this.parent && this.parent.checkedColor);
if (checkedColor && this.checked && !this.isDisabled) {
return {
borderColor: checkedColor,
@ -56,55 +58,71 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
methods: {
onClick(event) {
const { label } = this.$refs;
const { target } = event;
const labelClicked = label && (label === target || label.contains(target));
const { icon } = this.$refs;
const iconClicked = icon === target || icon.contains(target);
if (!this.isDisabled && !(labelClicked && this.labelDisabled)) {
if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
this.toggle();
}
this.$emit('click', event);
},
genIcon() {
const { checked } = this;
const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
return (
<div
ref="icon"
class={bem('icon', [
this.shape,
{ disabled: this.isDisabled, checked }
])}
style={{ fontSize: addUnit(iconSize) }}
>
{this.slots('icon', { checked }) || (
<Icon name="success" style={this.iconStyle} />
)}
</div>
);
},
genLabel() {
const slot = this.slots();
if (slot) {
return (
<span
class={bem('label', [
this.labelPosition,
{ disabled: this.isDisabled }
])}
>
{slot}
</span>
);
}
}
},
render() {
const { slots, checked } = this;
const CheckIcon = slots('icon', { checked }) || (
<Icon name="success" style={this.iconStyle} />
);
const Label = slots() && (
<span
ref="label"
class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
>
{slots()}
</span>
);
const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
const Children = [
<div
class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
style={{ fontSize: addUnit(iconSize) }}
>
{CheckIcon}
</div>
];
const Children = [this.genIcon()];
if (this.labelPosition === 'left') {
Children.unshift(Label);
Children.unshift(this.genLabel());
} else {
Children.push(Label);
Children.push(this.genLabel());
}
return (
<div
role={role}
class={bem()}
class={bem({
disabled: this.isDisabled,
'label-disabled': this.labelDisabled
})}
tabindex={this.tabindex}
aria-checked={String(this.checked)}
onClick={this.onClick}

4
src/radio/README.md
View File

@ -73,8 +73,8 @@ export default {
```html
<van-radio-group v-model="radio">
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2" icon-size="25px">Radio 2</van-radio>
<van-radio name="1" icon-size="24px">Radio 1</van-radio>
<van-radio name="2" icon-size="24px">Radio 2</van-radio>
</van-radio-group>
```

6
src/radio/README.zh-CN.md
View File

@ -46,7 +46,7 @@ export default {
### 禁用文本点击
通过设置`label-disabled`属性可以禁用单选框文本点击
设置`label-disabled`属性后，点击单选框图标以外的内容不会触发切换
```html
<van-radio-group v-model="radio">
@ -83,8 +83,8 @@ export default {
```html
<van-radio-group v-model="radio">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2" icon-size="25px">单选框 2</van-radio>
<van-radio name="1" icon-size="24px">单选框 1</van-radio>
<van-radio name="2" icon-size="24px">单选框 2</van-radio>
</van-radio-group>
```

8
src/radio/demo/index.vue
View File

@ -54,8 +54,12 @@
<demo-block :title="$t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="25px">{{ $t('radio') }} 2</van-radio>
<van-radio name="1" checked-color="#07c160" icon-size="24px">
{{ $t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ $t('radio') }} 2
</van-radio>
</van-radio-group>
</demo-block>

20
src/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -16,11 +16,11 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--disabled">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
</div>
<div role="radio" tabindex="-1" aria-checked="true" class="van-radio">
<div role="radio" tabindex="-1" aria-checked="true" class="van-radio van-radio--disabled">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
</div>
@ -28,11 +28,11 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--label-disabled">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 1</span>
</div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--label-disabled">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 2</span>
</div>
@ -79,12 +79,16 @@ exports[`renders demo correctly 1`] = `
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<!----></i></div><span class="van-radio__label">单选框 1</span>
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<!----></i></div><span class="van-radio__label">
单选框 1
</span>
</div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 25px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 2</span>
<div class="van-radio__icon van-radio__icon--round" style="font-size: 24px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">
单选框 2
</span>
</div>
</div>
</div>