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

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
+2 -2
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>
```
+3 -3
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>
```
+6 -2
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>
+12 -8
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>