mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-21 05:49:16 +08:00
feat(CheckboxGroup): add direction prop
This commit is contained in:
陈嘉涵
parent
4dd41b23de
commit
15390241d8
@ -9,6 +9,7 @@ export default createComponent({
|
||||
props: {
|
||||
max: [Number, String],
|
||||
disabled: Boolean,
|
||||
direction: String,
|
||||
iconSize: [Number, String],
|
||||
checkedColor: String,
|
||||
value: {
|
||||
@ -42,6 +43,6 @@ export default createComponent({
|
||||
},
|
||||
|
||||
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
8
src/checkbox-group/index.less
Normal file
@ -0,0 +1,8 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-checkbox-group {
|
||||
&--horizontal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@ -34,12 +34,6 @@ export default {
|
||||
<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
|
||||
|
||||
```html
|
||||
@ -85,6 +79,12 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Disable Label Click
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
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: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkAll() {
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
@ -161,11 +160,7 @@ export default {
|
||||
:title="`Checkbox ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -173,6 +168,12 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
@ -202,8 +203,9 @@ export default {
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| 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) |
|
||||
| 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` |
|
||||
| checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - |
|
||||
|
||||
|
||||
@ -38,14 +38,6 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`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
|
||||
<van-checkbox-group v-model="result">
|
||||
@ -117,9 +117,9 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 设置最大可选数
|
||||
### 限制最大可选数
|
||||
|
||||
通过`max`属性可以限制最大可选数
|
||||
通过`max`属性可以限制复选框组的最大可选数
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
@ -151,7 +151,6 @@ export default {
|
||||
result: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkAll() {
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
@ -177,11 +176,7 @@ export default {
|
||||
:title="`复选框 ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -189,6 +184,12 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
@ -219,7 +220,8 @@ export default {
|
||||
|------|------|------|------|
|
||||
| v-model (value) | 所有选中项的标识符 | *any[]* | - |
|
||||
| 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` |
|
||||
| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` |
|
||||
|
||||
|
||||
@ -13,12 +13,6 @@
|
||||
</van-checkbox>
|
||||
</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')">
|
||||
<van-checkbox v-model="checkboxShape" shape="square">
|
||||
{{ $t('customColor') }}
|
||||
@ -46,11 +40,23 @@
|
||||
</van-checkbox>
|
||||
</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')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox name="a">{{ $t('checkbox') }} a</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>
|
||||
</demo-block>
|
||||
|
||||
@ -86,7 +92,7 @@
|
||||
v-for="(item, index) in list"
|
||||
clickable
|
||||
:key="index"
|
||||
:title="$t('checkbox') + item"
|
||||
:title="`${$t('checkbox')} ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<template #right-icon>
|
||||
@ -109,12 +115,13 @@ export default {
|
||||
customColor: '自定义颜色',
|
||||
customShape: '自定义形状',
|
||||
title3: '复选框组',
|
||||
title4: '设置最大可选数',
|
||||
title4: '限制最大可选数',
|
||||
title5: '搭配单元格组件使用',
|
||||
toggleAll: '全选与反选',
|
||||
checkAll: '全选',
|
||||
inverse: '反选',
|
||||
disabledLabelClick: '禁用文本点击',
|
||||
horizontal: '水平排列',
|
||||
disableLabel: '禁用文本点击',
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
@ -128,7 +135,8 @@ export default {
|
||||
toggleAll: 'Toggle All',
|
||||
checkAll: 'Check All',
|
||||
inverse: 'Inverse',
|
||||
disabledLabelClick: 'Disable the click event of label',
|
||||
horizontal: 'Horizontal',
|
||||
disableLabel: 'Disable label click',
|
||||
},
|
||||
},
|
||||
|
||||
@ -140,11 +148,12 @@ export default {
|
||||
checkboxShape: true,
|
||||
checkboxLabel: true,
|
||||
checboxIcon: true,
|
||||
list: ['a', 'b', 'c'],
|
||||
list: ['a', 'b'],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
result3: [],
|
||||
checkAllResult: [],
|
||||
horizontalResult: [],
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
};
|
||||
@ -173,7 +182,7 @@ export default {
|
||||
background: @white;
|
||||
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
margin: 0 0 8px 20px;
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
@ -193,5 +202,9 @@ export default {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,14 +22,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</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 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">
|
||||
@ -61,6 +53,14 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</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 class="van-checkbox-group">
|
||||
<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">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
|
||||
</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">
|
||||
<!----></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>
|
||||
@ -118,21 +126,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<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 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>复选框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 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>
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<demo-block :title="$t('fieldType')">
|
||||
<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-checkbox v-model="checkbox" slot="input" shape="square" />
|
||||
</van-field>
|
||||
|
||||
<van-field name="switch" :label="$t('switch')">
|
||||
<van-switch v-model="switchChecked" slot="input" size="24" />
|
||||
<van-field name="radio" :label="$t('radio')">
|
||||
<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 name="rate" :label="$t('rate')">
|
||||
@ -33,6 +40,7 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
rate: '评分',
|
||||
radio: '单选框',
|
||||
submit: '提交',
|
||||
switch: '开关',
|
||||
slider: '滑块',
|
||||
@ -43,6 +51,7 @@ export default {
|
||||
},
|
||||
'en-US': {
|
||||
rate: 'Rate',
|
||||
radio: 'Radio',
|
||||
submit: 'Submit',
|
||||
switch: 'Switch',
|
||||
slider: 'Slider',
|
||||
@ -56,6 +65,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
stepper: 1,
|
||||
checkbox: false,
|
||||
|
||||
@ -21,6 +21,18 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<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__title van-field__label"><span>复选框</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
@ -35,12 +47,19 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<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-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 role="radiogroup" class="van-radio-group van-radio-group--horizontal">
|
||||
<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>
|
||||
|
||||
@ -51,15 +51,6 @@ export default {
|
||||
</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
|
||||
|
||||
```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
|
||||
|
||||
```html
|
||||
|
||||
@ -55,17 +55,6 @@ export default {
|
||||
</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`属性设置选中状态的图标颜色
|
||||
@ -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`和`CellGroup`组件
|
||||
|
||||
@ -25,13 +25,6 @@
|
||||
</van-radio-group>
|
||||
</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')">
|
||||
<van-radio-group v-model="radioShape" class="demo-radio-group">
|
||||
<van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio>
|
||||
@ -50,6 +43,17 @@
|
||||
</van-radio-group>
|
||||
</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')">
|
||||
<van-radio-group v-model="radio4" class="demo-radio-group">
|
||||
<van-radio name="1">
|
||||
@ -67,14 +71,10 @@
|
||||
</van-radio-group>
|
||||
</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>
|
||||
<demo-block :title="$t('disableLabel')">
|
||||
<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>
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
customColor: '自定义颜色',
|
||||
customShape: '自定义形状',
|
||||
customIconSize: '自定义大小',
|
||||
disabledLabelClick: '禁用文本点击',
|
||||
disableLabel: '禁用文本点击',
|
||||
},
|
||||
'en-US': {
|
||||
radio: 'Radio',
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
customColor: 'Custom Color',
|
||||
customShape: 'Custom Shape',
|
||||
customIconSize: 'Custom Icon Size',
|
||||
disabledLabelClick: 'Disable the click event of label',
|
||||
disableLabel: 'Disable label click',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -38,18 +38,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 role="radiogroup" class="demo-radio-group van-radio-group">
|
||||
<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 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 role="radiogroup" class="demo-radio-group van-radio-group">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
@ -94,17 +98,13 @@ 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 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 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 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 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user