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 component

Browse Source
This commit is contained in:
chenjiahan 2020-07-06 15:44:37 +08:00
parent ca0b7ff028
commit 1874b7af60
12 changed files with 657 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
breaking-changes.md
View File

@ -2,4 +2,8 @@
## Popup ## Popup
- v-model 调整为 v-model:show - `v-model` 调整为 `v-model:show`
## Switch
- v-model 对应的属性名和事件名由 `value/input` 调整为 `modelValue/update:modelValue`

110
src-next/switch/README.md Normal file
View File

@ -0,0 +1,110 @@
# Switch
### Install
```js
import Vue from 'vue';
import { Switch } from 'vant';
Vue.use(Switch);
```
## Usage
### Basic Usage
```html
<van-switch v-model="checked" />
```
```js
export default {
data() {
return {
checked: true,
};
},
};
```
### Disabled
```html
<van-switch v-model="checked" disabled />
```
### Loading
```html
<van-switch v-model="checked" loading />
```
### Custom Size
```html
<van-switch v-model="checked" size="24px" />
```
### Custom Color
```html
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
```
### Async Control
```html
<van-switch :model-value="checked" @update:model:value="onUpdateValue" />
```
```js
export default {
data() {
return {
checked: true,
};
},
methods: {
onUpdateValue(checked) {
Dialog.confirm({
title: 'Confirm',
message: 'Are you sure to toggle switch?',
}).then(() => {
this.checked = checked;
});
},
},
};
```
### Inside a Cell
```html
<van-cell center title="Title">
<template #right-icon>
<van-switch v-model="checked" size="24" />
</template>
</van-cell>
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Check status of Switch | _ActiveValue \| InactiveValue_ | `false` |
| loading | Whether to show loading icon | _boolean_ | `false` |
| disabled | Whether to disable switch | _boolean_ | `false` |
| size `v2.2.11` | Size of switch | _number \| string_ | `30px` |
| active-color | Background color when active | _string_ | `#1989fa` |
| inactive-color | Background color when inactive | _string_ | `white` |
| active-value | Value when active | _any_ | `true` |
| inactive-value | Value when inactive | _any_ | `false` |
### Events
| Event | Description | Parameters |
| --------------- | ----------------------------------- | -------------- |
| change | Triggered when check status changed | _value: any_ |
| click `v2.2.11` | Triggered when clicked | _event: Event_ |

122
src-next/switch/README.zh-CN.md Normal file
View File

@ -0,0 +1,122 @@
# Switch 开关
### 引入
```js
import Vue from 'vue';
import { Switch } from 'vant';
Vue.use(Switch);
```
## 代码演示
### 基础用法
通过`v-model`绑定开关的选中状态，`true`表示开，`false`表示关
```html
<van-switch v-model="checked" />
```
```js
export default {
data() {
return {
checked: true,
};
},
};
```
### 禁用状态
通过`disabled`属性来禁用开关，禁用状态下开关不可点击
```html
<van-switch v-model="checked" disabled />
```
### 加载状态
通过`loading`属性设置开关为加载状态，加载状态下开关不可点击
```html
<van-switch v-model="checked" loading />
```
### 自定义大小
通过`size`属性自定义开关的大小
```html
<van-switch v-model="checked" size="24px" />
```
### 自定义颜色
`active-color`属性表示打开时的背景色，`inactive-color`表示关闭时的背景色
```html
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
```
### 异步控制
需要异步控制开关时，可以使用 `modelValue` 属性和 `update:model-value` 事件代替 `v-model`，并在事件回调函数中手动处理开关状态。
```html
<van-switch :model-value="checked" @update:model:value="onUpdateValue" />
```
```js
export default {
data() {
return {
checked: true,
};
},
methods: {
onUpdateValue(checked) {
Dialog.confirm({
title: '提醒',
message: '是否切换开关？',
}).then(() => {
this.checked = checked;
});
},
},
};
```
### 搭配单元格使用
```html
<van-cell center title="标题">
<template #right-icon>
<van-switch v-model="checked" size="24" />
</template>
</van-cell>
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------ | ------------------ | --------- |
| v-model | 开关选中状态 | _any_ | `false` |
| loading | 是否为加载状态 | _boolean_ | `false` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| size `v2.2.11` | 开关尺寸，默认单位为`px` | _number \| string_ | `30px` |
| active-color | 打开时的背景色 | _string_ | `#1989fa` |
| inactive-color | 关闭时的背景色 | _string_ | `white` |
| active-value | 打开时对应的值 | _any_ | `true` |
| inactive-value | 关闭时对应的值 | _any_ | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
| --------------- | ------------------ | -------------- |
| change | 开关状态切换时触发 | _value: any_ |
| click `v2.2.11` | 点击时触发 | _event: Event_ |

98
src-next/switch/demo/index.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-switch v-model="checked" />
</demo-block>
<demo-block :title="t('disabled')">
<van-switch v-model="checked" disabled />
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-switch v-model="checked" loading />
</demo-block>
<demo-block :title="t('customSize')">
<van-switch v-model="checked2" size="24px" />
</demo-block>
<demo-block :title="t('customColor')">
<van-switch
v-model="checked3"
active-color="#07c160"
inactive-color="#ee0a24"
/>
</demo-block>
<demo-block :title="t('asyncControl')">
<van-switch :model-value="checked4" @update:model-value="onInput" />
</demo-block>
<demo-block :title="t('withCell')">
<van-cell center :title="t('title')">
<template #right-icon>
<van-switch v-model="checked5" size="24" />
</template>
</van-cell>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
title: '标题',
confirm: '提醒',
message: '是否切换开关？',
withCell: '搭配单元格使用',
customSize: '自定义大小',
customColor: '自定义颜色',
asyncControl: '异步控制',
},
'en-US': {
title: 'Title',
confirm: 'Confirm',
message: 'Are you sure to toggle switch?',
withCell: 'Inside a Cell',
customSize: 'Custom Size',
customColor: 'Custom Color',
asyncControl: 'Async Control',
},
},
data() {
return {
checked: true,
checked2: true,
checked3: true,
checked4: true,
checked5: true,
checked6: false,
};
},
methods: {
onInput(checked) {
this.$dialog
.confirm({
title: this.t('title'),
message: this.t('message'),
})
.then(() => {
this.checked4 = checked;
});
},
},
};
</script>
<style lang="less">
@import '../../style/var';
.demo-switch {
.van-switch {
margin-left: @padding-md;
}
}
</style>

71
src-next/switch/index.js Normal file
View File

@ -0,0 +1,71 @@
// Utils
import { createNamespace, addUnit } from '../utils';
import { switchProps } from './shared';
// Mixins
import { FieldMixin } from '../mixins/field';
// Components
import Loading from '../loading';
const [createComponent, bem] = createNamespace('switch');
export default createComponent({
mixins: [FieldMixin],
props: switchProps,
emits: ['click', 'change', 'update:modelValue'],
computed: {
checked() {
return this.modelValue === this.activeValue;
},
style() {
return {
fontSize: addUnit(this.size),
backgroundColor: this.checked ? this.activeColor : this.inactiveColor,
};
},
},
methods: {
onClick(event) {
this.$emit('click', event);
if (!this.disabled && !this.loading) {
const newValue = this.checked ? this.inactiveValue : this.activeValue;
this.$emit('update:modelValue', newValue);
this.$emit('change', newValue);
}
},
genLoading() {
if (this.loading) {
const color = this.checked ? this.activeColor : this.inactiveColor;
return <Loading class={bem('loading')} color={color} />;
}
},
},
render() {
const { checked, loading, disabled } = this;
return (
<div
class={bem({
on: checked,
loading,
disabled,
})}
role="switch"
style={this.style}
aria-checked={String(checked)}
onClick={this.onClick}
>
<div class={bem('node')}>{this.genLoading()}</div>
</div>
);
},
});

58
src-next/switch/index.less Normal file
View File

@ -0,0 +1,58 @@
@import '../style/var';
.van-switch {
position: relative;
display: inline-block;
box-sizing: content-box;
width: @switch-width;
height: @switch-height;
font-size: @switch-size;
background-color: @switch-background-color;
border: @switch-border;
border-radius: @switch-node-size;
cursor: pointer;
transition: background-color @switch-transition-duration;
&__node {
position: absolute;
top: 0;
left: 0;
z-index: @switch-node-z-index;
width: @switch-node-size;
height: @switch-node-size;
background-color: @switch-node-background-color;
border-radius: 100%;
box-shadow: @switch-node-box-shadow;
transition: transform @switch-transition-duration
cubic-bezier(0.3, 1.05, 0.4, 1.05);
}
&__loading {
top: 25%;
left: 25%;
width: 50%;
height: 50%;
line-height: 1;
}
&--on {
background-color: @switch-on-background-color;
.van-switch__node {
transform: translateX(@switch-width - @switch-node-size);
}
.van-switch__loading {
color: @switch-on-background-color;
}
}
&--disabled {
cursor: not-allowed;
opacity: @switch-disabled-opacity;
}
&--loading {
cursor: default;
}
}

31
src-next/switch/shared.ts Normal file
View File

@ -0,0 +1,31 @@
/**
* Common Switch Props
*/
export type SharedSwitchProps = {
size?: string | number;
loading?: boolean;
disabled?: boolean;
modelValue?: any;
activeValue: any;
inactiveValue: any;
activeColor?: string;
inactiveColor?: string;
};
export const switchProps = {
size: [Number, String],
loading: Boolean,
disabled: Boolean,
modelValue: null as any,
activeColor: String,
inactiveColor: String,
activeValue: {
type: null as any,
default: true,
},
inactiveValue: {
type: null as any,
default: false,
},
};

46
src-next/switch/test/__snapshots__/demo.spec.js.snap Normal file
View File

@ -0,0 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--loading">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</div>
</div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on">
<div class="van-switch__node"></div>
</div>
</div>
<div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>标题</span></div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
</div>
</div>
`;

13
src-next/switch/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inactive-color prop 1`] = `
<div role="switch" aria-checked="false" class="van-switch" style="background-color: black;">
<div class="van-switch__node"></div>
</div>
`;
exports[`size prop 1`] = `
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
<div class="van-switch__node"></div>
</div>
`;

4
src-next/switch/test/demo.spec.js Normal file
View File

@ -0,0 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);

91
src-next/switch/test/index.spec.js Normal file
View File

@ -0,0 +1,91 @@
import Switch from '..';
import { mount } from '../../../test';
test('emit event', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
listeners: {
input,
change,
},
});
wrapper.trigger('click');
expect(input).toHaveBeenCalledWith(true);
expect(change).toHaveBeenCalledWith(true);
});
test('disabled', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
listeners: {
input,
change,
},
propsData: {
disabled: true,
},
});
wrapper.trigger('click');
expect(input).toHaveBeenCalledTimes(0);
expect(change).toHaveBeenCalledTimes(0);
});
test('active-value & inactive-value prop', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
propsData: {
value: '1',
activeValue: '1',
inactiveValue: '2',
},
listeners: {
input,
change,
},
});
wrapper.trigger('click');
expect(input).toHaveBeenCalledWith('2');
expect(change).toHaveBeenCalledWith('2');
});
test('inactive-color prop', () => {
const wrapper = mount(Switch, {
propsData: {
value: '2',
inactiveValue: '2',
inactiveColor: 'black',
},
});
expect(wrapper).toMatchSnapshot();
});
test('size prop', () => {
const wrapper = mount(Switch, {
propsData: {
size: 20,
},
});
expect(wrapper).toMatchSnapshot();
});
test('click event', () => {
const click = jest.fn();
const wrapper = mount(Switch, {
listeners: {
click,
},
});
wrapper.trigger('click');
expect(click).toHaveBeenCalledTimes(1);
});

16
vant.config.js
View File

@ -167,10 +167,10 @@ module.exports = {
// path: 'stepper', // path: 'stepper',
// title: 'Stepper 步进器', // title: 'Stepper 步进器',
// }, // },
// { {
// path: 'switch', path: 'switch',
// title: 'Switch 开关', title: 'Switch 开关',
// }, },
// { // {
// path: 'uploader', // path: 'uploader',
// title: 'Uploader 文件上传', // title: 'Uploader 文件上传',
@ -501,10 +501,10 @@ module.exports = {
// path: 'stepper', // path: 'stepper',
// title: 'Stepper', // title: 'Stepper',
// }, // },
// { {
// path: 'switch', path: 'switch',
// title: 'Switch', title: 'Switch',
// }, },
// { // {
// path: 'uploader', // path: 'uploader',
// title: 'Uploader', // title: 'Uploader',