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

feat(RadioGroup): add checked-color prop (#4532)

Browse Source
This commit is contained in:
neverland 2019-09-22 18:29:27 +08:00 committed by GitHub
parent a64c607d71
commit 9e1758c1d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/radio-group/index.js
View File

@ -9,6 +9,7 @@ export default createComponent({
props: {
value: null,
disabled: Boolean,
checkedColor: String,
iconSize: [Number, String]
},

3
src/radio/README.md
View File

@ -114,9 +114,9 @@ export default {
| name | Radio name | *any* | - | - |
| shape | Can be set to `square` | *string* | `round` | - |
| disabled | Whether to disable radio | *boolean* | `false` | - |
| icon-size | Icon size | *string \| number* | `20px` | - |
| label-disabled | Whether to disable label click | *boolean* | `false` | - |
| label-position | Can be set to `left` | *string* | `right` | - |
| icon-size | Icon size | *string \| number* | `20px` | - |
| checked-color | Checked color | *string* | `#1989fa` | - | - |
### RadioGroup Props
@ -126,6 +126,7 @@ export default {
| v-model | Name of checked radio | *any* | - | - |
| disabled | Disable all radios | *boolean* | `false` | - |
| icon-size | Icon size of all radios | *string \| number* | `20px` | 2.2.3 |
| checked-color | Checked color of all radios | *string* | `#1989fa` | - | 2.2.3 |
### Radio Events

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

@ -118,9 +118,9 @@ export default {
| name | 标识符 | *any* | - | - |
| shape | 形状，可选值为 `square` | *string* | `round` | - |
| disabled | 是否为禁用状态 | *boolean* | `false` | - |
| icon-size | 当前单选框的图标大小，默认单位为`px` | *string \| number* | `20px` | - |
| label-disabled | 是否禁用文本内容点击 | *boolean* | `false` | - |
| label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
| checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
### RadioGroup Props
@ -130,6 +130,7 @@ export default {
| v-model | 当前选中项的标识符 | *any* | - | - |
| disabled | 是否禁用所有单选框 | *boolean* | `false` | - |
| icon-size | 所有单选框的图标大小，默认单位为`px` | *string \| number* | `20px` | 2.2.3 |
| checked-color | 所有单选框的选中状态颜色 | *string* | `#1989fa` | 2.2.3 |
### Radio Events

17
src/radio/test/__snapshots__/index.spec.js.snap
View File

@ -1,11 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`checked-color prop 1`] = `
<div role="radiogroup" class="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: black; background-color: black;">
<!----></i></div><span class="van-radio__label">label</span>
</div>
<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: white; background-color: white;">
<!----></i></div><span class="van-radio__label">label</span>
</div>
</div>
`;
exports[`icon-size prop 1`] = `
<div role="radiogroup" class="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: 10rem;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">label</span>
</div>
<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: 10rem;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">label</span>

14
src/radio/test/index.spec.js
View File

@ -75,7 +75,6 @@ test('icon-size prop', () => {
const wrapper = mount({
template: `
<van-radio-group icon-size="10rem">
<van-radio>label</van-radio>
<van-radio>label</van-radio>
<van-radio icon-size="5rem">label</van-radio>
</van-radio-group>
@ -84,3 +83,16 @@ test('icon-size prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('checked-color prop', () => {
const wrapper = mount({
template: `
<van-radio-group checked-color="black">
<van-radio :value="true">label</van-radio>
<van-radio :value="true" checked-color="white">label</van-radio>
</van-radio-group>
`
});
expect(wrapper).toMatchSnapshot();
});