[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,92 @@
|
||||
<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="#f44"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('asyncControl')">
|
||||
<van-switch
|
||||
:value="checked4"
|
||||
@input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '提醒',
|
||||
message: '是否切换开关？',
|
||||
customSize: '自定义大小',
|
||||
customColor: '自定义颜色',
|
||||
asyncControl: '异步控制'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?',
|
||||
customSize: 'Custom Size',
|
||||
customColor: 'Custom Color',
|
||||
asyncControl: 'Async Control'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
checked2: true,
|
||||
checked3: true,
|
||||
checked4: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
this.$dialog.confirm({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('message')
|
||||
}).then(() => {
|
||||
this.checked4 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
# Switch
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Switch } from 'vant';
|
||||
|
||||
Vue.use(Switch);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
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="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
### Async Control
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
:value="checked"
|
||||
@input="onInput"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
}).then(() => {
|
||||
this.checked = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Check status of Switch | `any` | `false` |
|
||||
| loading | Whether to show loading icon | `Boolean` | `false` |
|
||||
| disabled | Whether to disable switch | `Boolean` | `false` |
|
||||
| size | Size of switch | `String` | `30px` |
|
||||
| active-color | Background color when active | `String` | `#1989fa` |
|
||||
| inactive-color | Background color when inactive | `String` | `#fff` |
|
||||
| active-value | Value when active | `any` | `true` |
|
||||
| inactive-value | Value when inactive | `any` | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when check status changed | checked: is switch checked |
|
||||
@@ -0,0 +1,46 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
width: @switch-width;
|
||||
height: @switch-height;
|
||||
background-color: @switch-background-color;
|
||||
border: @switch-border;
|
||||
border-radius: @switch-node-size;
|
||||
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: @switch-transition-duration;
|
||||
}
|
||||
|
||||
&__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);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: @switch-disabled-opacity;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { BLUE, GRAY_DARK } from '../utils/color';
|
||||
import { switchProps, SharedSwitchProps } from './shared';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import Loading from '../loading';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
|
||||
export type SwitchEvents = {
|
||||
onChange?(checked: boolean): void;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('switch');
|
||||
|
||||
function Switch(
|
||||
h: CreateElement,
|
||||
props: SharedSwitchProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<SharedSwitchProps>
|
||||
) {
|
||||
const {
|
||||
size,
|
||||
value,
|
||||
loading,
|
||||
disabled,
|
||||
activeColor,
|
||||
activeValue,
|
||||
inactiveColor,
|
||||
inactiveValue
|
||||
} = props;
|
||||
|
||||
const checked = value === activeValue;
|
||||
|
||||
const switchStyle = {
|
||||
fontSize: size,
|
||||
backgroundColor: checked ? activeColor : inactiveColor
|
||||
};
|
||||
|
||||
const loadingColor = checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
|
||||
|
||||
function onClick() {
|
||||
if (!disabled && !loading) {
|
||||
const newValue = checked ? inactiveValue : activeValue;
|
||||
emit(ctx, 'input', newValue);
|
||||
emit(ctx, 'change', newValue);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class={bem({
|
||||
on: checked,
|
||||
disabled
|
||||
})}
|
||||
role="switch"
|
||||
style={switchStyle}
|
||||
aria-checked={String(checked)}
|
||||
onClick={onClick}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
<div class={bem('node')}>
|
||||
{loading && <Loading class={bem('loading')} color={loadingColor} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Switch.props = switchProps;
|
||||
|
||||
export default createComponent<SharedSwitchProps, SwitchEvents>(Switch);
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* Common Switch Props
|
||||
*/
|
||||
|
||||
export type SharedSwitchProps = {
|
||||
size: string;
|
||||
value?: any;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
activeValue: any;
|
||||
inactiveValue: any;
|
||||
activeColor?: string;
|
||||
inactiveColor?: string;
|
||||
};
|
||||
|
||||
export const switchProps = {
|
||||
value: null as any,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
activeValue: {
|
||||
type: null as any,
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: null as any,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '30px'
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
// 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" style="font-size: 30px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled" style="font-size: 30px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;">
|
||||
<div class="van-switch__node">
|
||||
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><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="font-size: 30px; 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" style="font-size: 30px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`inactive-color prop 1`] = `
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 30px; background-color: black;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,74 @@
|
||||
import Switch from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('emit event', () => {
|
||||
const input = jest.fn();
|
||||
const change = jest.fn();
|
||||
const wrapper = mount(Switch, {
|
||||
context: {
|
||||
on: {
|
||||
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, {
|
||||
context: {
|
||||
on: {
|
||||
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'
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
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();
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
# Switch 开关
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Switch } from 'vant';
|
||||
|
||||
Vue.use(Switch);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 禁用状态
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
disabled
|
||||
/>
|
||||
```
|
||||
|
||||
### 加载状态
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
loading
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义大小
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
size="24px"
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
active-color="#07c160"
|
||||
inactive-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
### 异步控制
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
:value="checked"
|
||||
@input="onInput"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否切换开关？'
|
||||
}).then(() => {
|
||||
this.checked = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 开关选中状态 | `any` | `false` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| size | 开关尺寸 | `String` | `30px` | 1.0.0 |
|
||||
| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.4.2 |
|
||||
| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.4.2 |
|
||||
| active-value | 打开时的值 | `any` | `true` | 1.5.6 |
|
||||
| inactive-value | 关闭时的值 | `any` | `false` | 1.5.6 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
||||
Reference in New Issue
Block a user