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(CheckboxGroup): add checked-color prop (#4531)

Browse Source
This commit is contained in:
neverland 2019-09-22 17:36:39 +08:00 committed by GitHub
parent 3f4ec83145
commit a64c607d71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ export default createComponent({
max: Number,
disabled: Boolean,
iconSize: [Number, String],
checkedColor: String,
value: {
type: Array,
default: () => []

5
src/checkbox/README.md
View File

@ -151,9 +151,9 @@ export default {
| shape | Can be set to `square` | *string* | `round` | - |
| v-model | Check status | *boolean* | `false` | - |
| disabled | Disable checkbox | *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` | - | - |
### CheckboxGroup Props
@ -161,9 +161,10 @@ export default {
| Attribute | Description | Type | Default | Version |
|------|------|------|------|------|
| v-model | Names of all checked checkboxes | *any[]* | - | - |
| max | Maximum amount of checked options | *number* | `0`(Unlimited) | - |
| disabled | Disable all checkboxes | *boolean* | `false` | - |
| icon-size | Icon size of all checkboxes | *string \| number* | `20px` | 2.2.3 |
| max | Maximum amount of checked options | *number* | `0`(Unlimited) | - |
| checked-color | Checked color of all checkboxes | *string* | `#1989fa` | - | 2.2.3 |
### Checkbox Events

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

@ -153,9 +153,9 @@ export default {
| shape | 形状，可选值为 `square` | *string* | `round` | - |
| v-model | 是否为选中状态 | *boolean* | `false` | - |
| 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` | - |
### CheckboxGroup Props
@ -164,8 +164,9 @@ export default {
|------|------|------|------|------|
| v-model | 所有选中项的标识符 | *any[]* | - | - |
| disabled | 是否禁用所有复选框 | *boolean* | `false` | - |
| max | 最大可选数，0 为无限制 | *number* | `0` | - |
| icon-size | 所有复选框的图标大小，默认单位为`px` | *string \| number* | `20px` | 2.2.3 |
| max | 设置最大可选数，0 为无限制 | *number* | `0` | - |
| checked-color | 所有复选框的选中状态颜色 | *string* | `#1989fa` | 2.2.3 |
### Checkbox Events

17
src/checkbox/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 class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: black; background-color: black;">
<!----></i></div><span class="van-checkbox__label">label</span>
</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"><i class="van-icon van-icon-success" style="border-color: white; background-color: white;">
<!----></i></div><span class="van-checkbox__label">label</span>
</div>
</div>
`;
exports[`icon-size prop 1`] = `
<div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 10rem;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">label</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 10rem;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">label</span>

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

@ -110,7 +110,6 @@ test('icon-size prop', () => {
const wrapper = mount({
template: `
<van-checkbox-group icon-size="10rem">
<van-checkbox>label</van-checkbox>
<van-checkbox>label</van-checkbox>
<van-checkbox icon-size="5rem">label</van-checkbox>
</van-checkbox-group>
@ -119,3 +118,16 @@ test('icon-size prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('checked-color prop', () => {
const wrapper = mount({
template: `
<van-checkbox-group :value="['a', 'b']" checked-color="black">
<van-checkbox name="a" :value="true">label</van-checkbox>
<van-checkbox name="b" :value="true" checked-color="white">label</van-checkbox>
</van-checkbox-group>
`
});
expect(wrapper).toMatchSnapshot();
});

2
src/mixins/checkbox.js
View File

@ -28,7 +28,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
},
iconStyle() {
const { checkedColor } = this;
const checkedColor = this.checkedColor || (this.parent && this.parent.checkedColor);
if (checkedColor && this.checked && !this.isDisabled) {
return {
borderColor: checkedColor,