mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Checkbox): rename bind-parent to bind-group
This commit is contained in:
parent
444485f974
commit
294ffd4f55
@ -84,27 +84,6 @@
|
|||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
<demo-block :title="$t('title6')">
|
|
||||||
<van-checkbox v-model="selectAll">{{ $t('selectAll') }}</van-checkbox>
|
|
||||||
<van-checkbox-group
|
|
||||||
v-model="result4"
|
|
||||||
@change="select4"
|
|
||||||
>
|
|
||||||
<van-checkbox
|
|
||||||
v-for="(item, index) in list"
|
|
||||||
:key="index"
|
|
||||||
:name="item"
|
|
||||||
>
|
|
||||||
{{ $t('checkbox') }} {{ item }}
|
|
||||||
</van-checkbox>
|
|
||||||
<van-checkbox
|
|
||||||
:bind-parent="false"
|
|
||||||
v-model="other"
|
|
||||||
>
|
|
||||||
{{ $t('checkbox') }} {{ $t('other') }}
|
|
||||||
</van-checkbox>
|
|
||||||
</van-checkbox-group>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
</demo-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -117,10 +96,7 @@ export default {
|
|||||||
customColor: '自定义颜色',
|
customColor: '自定义颜色',
|
||||||
title3: '复选框组',
|
title3: '复选框组',
|
||||||
title4: '设置最大可选数',
|
title4: '设置最大可选数',
|
||||||
title5: '搭配单元格组件使用',
|
title5: '搭配单元格组件使用'
|
||||||
title6: '取消和复选框组的绑定',
|
|
||||||
other: '其他',
|
|
||||||
selectAll: '全选',
|
|
||||||
},
|
},
|
||||||
'en-US': {
|
'en-US': {
|
||||||
checkbox: 'Checkbox',
|
checkbox: 'Checkbox',
|
||||||
@ -128,10 +104,7 @@ export default {
|
|||||||
customColor: 'Custom Color',
|
customColor: 'Custom Color',
|
||||||
title3: 'Checkbox Group',
|
title3: 'Checkbox Group',
|
||||||
title4: 'Maximum amount of checked options',
|
title4: 'Maximum amount of checked options',
|
||||||
title5: 'Inside a Cell',
|
title5: 'Inside a Cell'
|
||||||
title6: 'Cancel Bind Group',
|
|
||||||
other: 'other',
|
|
||||||
selectAll: 'select all',
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -148,34 +121,16 @@ export default {
|
|||||||
result: ['a', 'b'],
|
result: ['a', 'b'],
|
||||||
result2: [],
|
result2: [],
|
||||||
result3: [],
|
result3: [],
|
||||||
result4: [],
|
|
||||||
other: true,
|
|
||||||
selectAll: false,
|
|
||||||
icon: {
|
icon: {
|
||||||
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
selectAll() {
|
|
||||||
if (this.selectAll) {
|
|
||||||
this.result4 = this.list;
|
|
||||||
} else {
|
|
||||||
this.result4 = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
toggle(index) {
|
toggle(index) {
|
||||||
this.$refs.checkboxes[index].toggle();
|
this.$refs.checkboxes[index].toggle();
|
||||||
},
|
|
||||||
select4() {
|
|
||||||
if (this.result4.length === 3) {
|
|
||||||
this.selectAll = true;
|
|
||||||
} else {
|
|
||||||
this.selectAll = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -145,6 +145,7 @@ export default {
|
|||||||
| label-disabled | Whether to disable label click | `Boolean` | `false` |
|
| label-disabled | Whether to disable label click | `Boolean` | `false` |
|
||||||
| label-position | Can be set to `left` | `String` | `right` |
|
| label-position | Can be set to `left` | `String` | `right` |
|
||||||
| checked-color | Checked color | `String` | `#1989fa` | - |
|
| checked-color | Checked color | `String` | `#1989fa` | - |
|
||||||
|
| bind-group | Whether to bind with CheckboxGroup | `boolean` | `true` |
|
||||||
|
|
||||||
### CheckboxGroup API
|
### CheckboxGroup API
|
||||||
|
|
||||||
|
@ -75,12 +75,13 @@ test('checkbox group', async () => {
|
|||||||
await later();
|
await later();
|
||||||
expect(wrapper.vm.result).toEqual(['b']);
|
expect(wrapper.vm.result).toEqual(['b']);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('checkbox group unbind', async () => {
|
test('checkbox group unbind', async () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
template: `
|
template: `
|
||||||
<checkbox-group v-model="result" :max="2">
|
<checkbox-group v-model="result" :max="2">
|
||||||
<checkbox v-for="item in list" :key="item" :name="item"></checkbox>
|
<checkbox v-for="item in list" :key="item" :name="item" />
|
||||||
<checkbox :bind-parent='false' v-model="other"></checkbox>
|
<checkbox :bind-parent='false' v-model="value" />
|
||||||
</checkbox-group>
|
</checkbox-group>
|
||||||
`,
|
`,
|
||||||
components: {
|
components: {
|
||||||
@ -90,6 +91,7 @@ test('checkbox group unbind', async () => {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
result: [],
|
result: [],
|
||||||
|
value: false,
|
||||||
list: ['a', 'b', 'c']
|
list: ['a', 'b', 'c']
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -99,10 +101,7 @@ test('checkbox group unbind', async () => {
|
|||||||
icons.at(3).trigger('click');
|
icons.at(3).trigger('click');
|
||||||
await later();
|
await later();
|
||||||
expect(wrapper.vm.result).toEqual([]);
|
expect(wrapper.vm.result).toEqual([]);
|
||||||
|
expect(wrapper.vm.value).toBeTruthy();
|
||||||
icons.at(3).trigger('click');
|
|
||||||
await later();
|
|
||||||
expect(wrapper.vm.result).toEqual([]);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('click event', () => {
|
test('click event', () => {
|
||||||
|
@ -79,7 +79,6 @@ export default {
|
|||||||
>
|
>
|
||||||
复选框 {{ item }}
|
复选框 {{ item }}
|
||||||
</van-checkbox>
|
</van-checkbox>
|
||||||
<vant-checkbox :bind-parent="false">不与复选框组绑定</vant-checkbox>
|
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -149,7 +148,7 @@ export default {
|
|||||||
| label-disabled | 是否禁用复选框文本点击 | `Boolean` | `false` | - |
|
| label-disabled | 是否禁用复选框文本点击 | `Boolean` | `false` | - |
|
||||||
| label-position | 文本位置,可选值为 `left` | `String` | `right` | 1.1.11 |
|
| label-position | 文本位置,可选值为 `left` | `String` | `right` | 1.1.11 |
|
||||||
| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |
|
| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |
|
||||||
| bind-parent | 与复选框组绑定 | `boolean` | `true` | xxx |
|
| bind-group | 是否与复选框组绑定 | `boolean` | `true` | 1.6.26 |
|
||||||
|
|
||||||
### CheckboxGroup API
|
### CheckboxGroup API
|
||||||
|
|
||||||
|
@ -18,9 +18,9 @@ export const CheckboxMixin = (parent, bem) => ({
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'round'
|
default: 'round'
|
||||||
},
|
},
|
||||||
bindParent: {
|
bindGroup: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user