blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-21 22:09:16 +08:00
Code Issues Projects Releases Wiki Activity

feat(CheckboxGroup): add direction prop

Browse Source
This commit is contained in:
陈嘉涵 2020-02-10 19:37:52 +08:00
parent 4dd41b23de
commit 15390241d8
12 changed files with 184 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/checkbox-group/index.js
View File

@ -9,6 +9,7 @@ export default createComponent({
props: { props: {
max: [Number, String], max: [Number, String],
disabled: Boolean, disabled: Boolean,
direction: String,
iconSize: [Number, String], iconSize: [Number, String],
checkedColor: String, checkedColor: String,
value: { value: {
@ -42,6 +43,6 @@ export default createComponent({
}, },
render() { render() {
return <div class={bem()}>{this.slots()}</div>; return <div class={bem([this.direction])}>{this.slots()}</div>;
}, },
}); });

8
src/checkbox-group/index.less Normal file
View File

@ -0,0 +1,8 @@
@import '../style/var';
.van-checkbox-group {
&--horizontal {
display: flex;
flex-wrap: wrap;
}
}

28
src/checkbox/README.md
View File

@ -34,12 +34,6 @@ export default {
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox> <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
``` ```
### Disabled Label Click
```html
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
```
### Custom Shape ### Custom Shape
```html ```html
@ -85,6 +79,12 @@ export default {
}; };
``` ```
### Disable Label Click
```html
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
```
### Checkbox Group ### Checkbox Group
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model. When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
@ -137,7 +137,6 @@ export default {
result: [] result: []
} }
}, },
methods: { methods: {
checkAll() { checkAll() {
this.$refs.checkboxGroup.toggleAll(true); this.$refs.checkboxGroup.toggleAll(true);
@ -161,11 +160,7 @@ export default {
:title="`Checkbox ${item}`" :title="`Checkbox ${item}`"
@click="toggle(index)" @click="toggle(index)"
> >
<van-checkbox <van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>
@ -173,6 +168,12 @@ export default {
```js ```js
export default { export default {
data() {
return {
list: ['a', 'b']
result: []
};
},
methods: { methods: {
toggle(index) { toggle(index) {
this.$refs.checkboxes[index].toggle(); this.$refs.checkboxes[index].toggle();
@ -202,8 +203,9 @@ export default {
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| v-model (value) | Names of all checked checkboxes | *any[]* | - | | v-model (value) | Names of all checked checkboxes | *any[]* | - |
| disabled | Whether to disable all checkboxes | *boolean* | `false` |
| max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) | | max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) |
| disabled | Disable all checkboxes | *boolean* | `false` | | direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` |
| icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` | | icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` |
| checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - | | checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - |

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

@ -38,14 +38,6 @@ export default {
<van-checkbox v-model="checked" disabled>复选框</van-checkbox> <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
``` ```
### 禁用文本点击
设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
```html
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
```
### 自定义形状 ### 自定义形状
将`shape`属性设置为`square`，复选框的形状会变成方形 将`shape`属性设置为`square`，复选框的形状会变成方形
@ -95,9 +87,17 @@ export default {
} }
``` ```
### 禁用文本点击
设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
```html
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
```
### 复选框组 ### 复选框组
复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name` 复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
```html ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
@ -117,9 +117,9 @@ export default {
}; };
``` ```
### 设置最大可选数 ### 限制最大可选数
通过`max`属性可以限制最大可选数 通过`max`属性可以限制复选框组的最大可选数
```html ```html
<van-checkbox-group v-model="result" :max="2"> <van-checkbox-group v-model="result" :max="2">
@ -151,7 +151,6 @@ export default {
result: [] result: []
} }
}, },
methods: { methods: {
checkAll() { checkAll() {
this.$refs.checkboxGroup.toggleAll(true); this.$refs.checkboxGroup.toggleAll(true);
@ -177,11 +176,7 @@ export default {
:title="`复选框 ${item}`" :title="`复选框 ${item}`"
@click="toggle(index)" @click="toggle(index)"
> >
<van-checkbox <van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>
@ -189,6 +184,12 @@ export default {
```js ```js
export default { export default {
data() {
return {
list: ['a', 'b']
result: []
};
},
methods: { methods: {
toggle(index) { toggle(index) {
this.$refs.checkboxes[index].toggle(); this.$refs.checkboxes[index].toggle();
@ -219,7 +220,8 @@ export default {
|------|------|------|------| |------|------|------|------|
| v-model (value) | 所有选中项的标识符 | *any[]* | - | | v-model (value) | 所有选中项的标识符 | *any[]* | - |
| disabled | 是否禁用所有复选框 | *boolean* | `false` | | disabled | 是否禁用所有复选框 | *boolean* | `false` |
| max | 最大可选数，0 为无限制 | *number \| string* | `0` | | max | 最大可选数，`0`为无限制 | *number \| string* | `0` |
| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` |
| icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` | | icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` |
| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` | | checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` |

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

@ -13,12 +13,6 @@
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('disabledLabelClick')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customShape')"> <demo-block :title="$t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square"> <van-checkbox v-model="checkboxShape" shape="square">
{{ $t('customColor') }} {{ $t('customColor') }}
@ -46,11 +40,23 @@
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }}
</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 name="a">{{ $t('checkbox') }} a</van-checkbox> <van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox> <van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox> </van-checkbox-group>
</demo-block>
<demo-block :title="$t('horizontal')">
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
@ -86,7 +92,7 @@
v-for="(item, index) in list" v-for="(item, index) in list"
clickable clickable
:key="index" :key="index"
:title="$t('checkbox') + item" :title="`${$t('checkbox')} ${item}`"
@click="toggle(index)" @click="toggle(index)"
> >
<template #right-icon> <template #right-icon>
@ -109,12 +115,13 @@ export default {
customColor: '自定义颜色', customColor: '自定义颜色',
customShape: '自定义形状', customShape: '自定义形状',
title3: '复选框组', title3: '复选框组',
title4: '设置最大可选数', title4: '限制最大可选数',
title5: '搭配单元格组件使用', title5: '搭配单元格组件使用',
toggleAll: '全选与反选', toggleAll: '全选与反选',
checkAll: '全选', checkAll: '全选',
inverse: '反选', inverse: '反选',
disabledLabelClick: '禁用文本点击', horizontal: '水平排列',
disableLabel: '禁用文本点击',
}, },
'en-US': { 'en-US': {
checkbox: 'Checkbox', checkbox: 'Checkbox',
@ -128,7 +135,8 @@ export default {
toggleAll: 'Toggle All', toggleAll: 'Toggle All',
checkAll: 'Check All', checkAll: 'Check All',
inverse: 'Inverse', inverse: 'Inverse',
disabledLabelClick: 'Disable the click event of label', horizontal: 'Horizontal',
disableLabel: 'Disable label click',
}, },
}, },
@ -140,11 +148,12 @@ export default {
checkboxShape: true, checkboxShape: true,
checkboxLabel: true, checkboxLabel: true,
checboxIcon: true, checboxIcon: true,
list: ['a', 'b', 'c'], list: ['a', 'b'],
result: ['a', 'b'], result: ['a', 'b'],
result2: [], result2: [],
result3: [], result3: [],
checkAllResult: [], checkAllResult: [],
horizontalResult: [],
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
@ -173,7 +182,7 @@ export default {
background: @white; background: @white;
.van-checkbox { .van-checkbox {
margin: 10px 0 0 20px; margin: 0 0 8px 20px;
} }
.van-cell { .van-cell {
@ -193,5 +202,9 @@ export default {
margin-left: @padding-md; margin-left: @padding-md;
} }
} }
.van-doc-demo-block__title {
margin-top: -8px;
}
} }
</style> </style>

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

@ -22,14 +22,6 @@ exports[`renders demo correctly 1`] = `
</span> </span>
</div> </div>
</div> </div>
<div>
<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">
复选框
</span>
</div>
</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">
<div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
@ -61,6 +53,14 @@ exports[`renders demo correctly 1`] = `
</span> </span>
</div> </div>
</div> </div>
<div>
<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">
复选框
</span>
</div>
</div>
<div> <div>
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
@ -71,9 +71,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"> <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">复选框 b</span> <!----></i></div><span class="van-checkbox__label">复选框 b</span>
</div> </div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> </div>
</div>
<div>
<div class="van-checkbox-group van-checkbox-group--horizontal">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 c</span> <!----></i></div><span class="van-checkbox__label">复选框 a</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
</div> </div>
</div> </div>
</div> </div>
@ -118,21 +126,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框a</span></div> <div class="van-cell__title"><span>复选框 a</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框b</span></div> <div class="van-cell__title"><span>复选框 b</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框c</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"> <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"> <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div> <!----></i></div>

14
src/form/demo/FieldType.vue
View File

@ -1,12 +1,19 @@
<template> <template>
<demo-block :title="$t('fieldType')"> <demo-block :title="$t('fieldType')">
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field name="switch" :label="$t('switch')">
<van-switch v-model="switchChecked" slot="input" size="24" />
</van-field>
<van-field name="checkbox" :label="$t('checkbox')"> <van-field name="checkbox" :label="$t('checkbox')">
<van-checkbox v-model="checkbox" slot="input" shape="square" /> <van-checkbox v-model="checkbox" slot="input" shape="square" />
</van-field> </van-field>
<van-field name="switch" :label="$t('switch')"> <van-field name="radio" :label="$t('radio')">
<van-switch v-model="switchChecked" slot="input" size="24" /> <van-radio-group v-model="radio" direction="horizontal" slot="input">
<van-radio name="1" class="demo-radio">{{ $t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</van-field> </van-field>
<van-field name="rate" :label="$t('rate')"> <van-field name="rate" :label="$t('rate')">
@ -33,6 +40,7 @@ export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
rate: '评分', rate: '评分',
radio: '单选框',
submit: '提交', submit: '提交',
switch: '开关', switch: '开关',
slider: '滑块', slider: '滑块',
@ -43,6 +51,7 @@ export default {
}, },
'en-US': { 'en-US': {
rate: 'Rate', rate: 'Rate',
radio: 'Radio',
submit: 'Submit', submit: 'Submit',
switch: 'Switch', switch: 'Switch',
slider: 'Slider', slider: 'Slider',
@ -56,6 +65,7 @@ export default {
data() { data() {
return { return {
rate: 3, rate: 3,
radio: '1',
slider: 50, slider: 50,
stepper: 1, stepper: 1,
checkbox: false, checkbox: false,

25
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -21,6 +21,18 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<form class="van-form"> <form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>开关</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>复选框</span></div> <div class="van-cell__title van-field__label"><span>复选框</span></div>
<div class="van-cell__value van-field__value"> <div class="van-cell__value van-field__value">
@ -35,12 +47,19 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>开关</span></div> <div class="van-cell__title van-field__label"><span>单选框</span></div>
<div class="van-cell__value van-field__value"> <div class="van-cell__value van-field__value">
<div class="van-field__body"> <div class="van-field__body">
<div class="van-field__control van-field__control--custom"> <div class="van-field__control van-field__control--custom">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;"> <div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
<div class="van-switch__node"></div> <div role="radio" tabindex="0" aria-checked="true" class="demo-radio van-radio van-radio--horizontal">
<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 van-radio--horizontal">
<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>
</div> </div>
</div> </div>
</div> </div>

18
src/radio/README.md
View File

@ -51,15 +51,6 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
### Disabled Label Click
```html
<van-radio-group v-model="radio">
<van-radio name="1" icon-disabled>Radio 1</van-radio>
<van-radio name="2" icon-disabled>Radio 2</van-radio>
</van-radio-group>
```
### Custom Shape ### Custom Shape
```html ```html
@ -124,6 +115,15 @@ export default {
}; };
``` ```
### Disable Label Click
```html
<van-radio-group v-model="radio">
<van-radio name="1" label-disabled>Radio 1</van-radio>
<van-radio name="2" label-disabled>Radio 2</van-radio>
</van-radio-group>
```
### Inside a Cell ### Inside a Cell
```html ```html

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

@ -55,17 +55,6 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
### 禁用文本点击
设置`label-disabled`属性后，点击单选框图标以外的内容不会触发切换
```html
<van-radio-group v-model="radio">
<van-radio name="1" icon-disabled>单选框 1</van-radio>
<van-radio name="2" icon-disabled>单选框 2</van-radio>
</van-radio-group>
```
### 自定义形状 ### 自定义形状
通过`square`属性设置选中状态的图标颜色 通过`square`属性设置选中状态的图标颜色
@ -134,6 +123,17 @@ export default {
} }
``` ```
### 禁用文本点击
设置`label-disabled`属性后，点击图标以外的内容不会触发单选框切换
```html
<van-radio-group v-model="radio">
<van-radio name="1" label-disabled>单选框 1</van-radio>
<van-radio name="2" label-disabled>单选框 2</van-radio>
</van-radio-group>
```
### 与 Cell 组件一起使用 ### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件 此时你需要再引入`Cell`和`CellGroup`组件

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

@ -25,13 +25,6 @@
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('disabledLabelClick')">
<van-radio-group v-model="radioLabel" class="demo-radio-group">
<van-radio name="1" label-disabled>{{ $t('radio') }} 1</van-radio>
<van-radio name="2" label-disabled>{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('customShape')"> <demo-block :title="$t('customShape')">
<van-radio-group v-model="radioShape" class="demo-radio-group"> <van-radio-group v-model="radioShape" class="demo-radio-group">
<van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio> <van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio>
@ -50,6 +43,17 @@
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<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>
<demo-block :title="$t('customIcon')"> <demo-block :title="$t('customIcon')">
<van-radio-group v-model="radio4" class="demo-radio-group"> <van-radio-group v-model="radio4" class="demo-radio-group">
<van-radio name="1"> <van-radio name="1">
@ -67,14 +71,10 @@
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
<demo-block :title="$t('customIconSize')"> <demo-block :title="$t('disableLabel')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group"> <van-radio-group v-model="radioLabel" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160" icon-size="24px"> <van-radio name="1" label-disabled>{{ $t('radio') }} 1</van-radio>
{{ $t('radio') }} 1 <van-radio name="2" label-disabled>{{ $t('radio') }} 2</van-radio>
</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ $t('radio') }} 2
</van-radio>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
@ -106,7 +106,7 @@ export default {
customColor: '自定义颜色', customColor: '自定义颜色',
customShape: '自定义形状', customShape: '自定义形状',
customIconSize: '自定义大小', customIconSize: '自定义大小',
disabledLabelClick: '禁用文本点击', disableLabel: '禁用文本点击',
}, },
'en-US': { 'en-US': {
radio: 'Radio', radio: 'Radio',
@ -118,7 +118,7 @@ export default {
customColor: 'Custom Color', customColor: 'Custom Color',
customShape: 'Custom Shape', customShape: 'Custom Shape',
customIconSize: 'Custom Icon Size', customIconSize: 'Custom Icon Size',
disabledLabelClick: 'Disable the click event of label', disableLabel: 'Disable label click',
}, },
}, },

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

@ -38,18 +38,6 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<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 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>
</div>
</div>
<div> <div>
<div role="radiogroup" class="demo-radio-group van-radio-group"> <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">
@ -78,6 +66,22 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<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" 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: 24px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">
单选框 2
</span>
</div>
</div>
</div>
<div> <div>
<div role="radiogroup" class="demo-radio-group van-radio-group"> <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">
@ -94,17 +98,13 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div role="radiogroup" class="demo-radio-group van-radio-group"> <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" style="font-size: 24px;"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);"> <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"> <!----></i></div><span class="van-radio__label">单选框 1</span>
单选框 1
</span>
</div> </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" style="font-size: 24px;"><i class="van-icon van-icon-success"> <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"> <!----></i></div><span class="van-radio__label">单选框 2</span>
单选框 2
</span>
</div> </div>
</div> </div>
</div> </div>