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(Switch): add background slot (#10666)

Browse Source 
* feat(Switch): add background slot

* chore: revert lock file

* chore: new line
This commit is contained in:
neverland 2022-06-04 20:29:28 +08:00 committed by GitHub
parent 4a602f7e46
commit 586bc21dd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vant/src/switch/README.md
View File

@ -154,9 +154,10 @@ export default {
### Slots
| Name | Description | SlotProps |
| ------------- | -------------------------- | --------- |
| node `v3.5.0` | Custom the content of node | - |
| Name | Description | SlotProps |
| ------------------- | ------------------------------- | --------- |
| node `v3.5.0` | Custom the content of node | - |
| background `v3.5.0` | Custom the background of switch | - |
### Types

27
packages/vant/src/switch/README.zh-CN.md
View File

@ -146,16 +146,16 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------ | ------------------ | --------- |
| v-model | 开关选中状态 | _any_ | `false` |
| loading | 是否为加载状态 | _boolean_ | `false` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| size | 开关尺寸，默认单位为`px` | _number \| string_ | `30px` |
| active-color | 打开时的背景色 | _string_ | `#1989fa` |
| inactive-color | 关闭时的背景色 | _string_ | `white` |
| active-value | 打开时对应的值 | _any_ | `true` |
| inactive-value | 关闭时对应的值 | _any_ | `false` |
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------- | ------------------ | --------- |
| v-model | 开关选中状态 | _any_ | `false` |
| loading | 是否为加载状态 | _boolean_ | `false` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| size | 开关尺寸，默认单位为 `px` | _number \| string_ | `30px` |
| active-color | 打开时的背景色 | _string_ | `#1989fa` |
| inactive-color | 关闭时的背景色 | _string_ | `white` |
| active-value | 打开时对应的值 | _any_ | `true` |
| inactive-value | 关闭时对应的值 | _any_ | `false` |
### Events
@ -166,9 +166,10 @@ export default {
### Slots
| 名称 | 说明 | 参数 |
| ------------- | ---------------- | ---- |
| node `v3.5.0` | 自定义按钮的内容 | - |
| 名称 | 说明 | 参数 |
| ------------------- | -------------------- | ---- |
| node `v3.5.0` | 自定义按钮的内容 | - |
| background `v3.5.0` | 自定义开关的背景内容 | - |
### 类型定义

1
packages/vant/src/switch/Switch.tsx
View File

@ -76,6 +76,7 @@ export default defineComponent({
onClick={onClick}
>
<div class={bem('node')}>{renderLoading()}</div>
{slots.background?.()}
</div>
);
};

24
packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap
View File

@ -43,3 +43,27 @@ exports[`should apply inactive color to loading icon 1`] = `
</span>
</div>
`;
exports[`should render background slot correctly 1`] = `
<div role="switch"
class="van-switch"
tabindex="0"
aria-checked="false"
>
<div class="van-switch__node">
</div>
Custom background
</div>
`;
exports[`should render node slot correctly 1`] = `
<div role="switch"
class="van-switch"
tabindex="0"
aria-checked="false"
>
<div class="van-switch__node">
Custom node
</div>
</div>
`;

20
packages/vant/src/switch/test/index.spec.ts
View File

@ -109,3 +109,23 @@ test('should allow to custom active-value and inactive-value', () => {
wrapper.trigger('click');
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['off']);
});
test('should render node slot correctly', () => {
const wrapper = mount(Switch, {
slots: {
node: () => 'Custom node',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render background slot correctly', () => {
const wrapper = mount(Switch, {
slots: {
background: () => 'Custom background',
},
});
expect(wrapper.html()).toMatchSnapshot();
});