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

switch docs

Browse Source
This commit is contained in:
cookfront 2017-03-31 20:47:09 +08:00
parent 4d974ce619
commit 4e9126e352
4 changed files with 101 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples-dist/popup.vue
View File

@ -61,7 +61,7 @@
} }
.zan-popup-4, .zan-popup-4,
.zan-popup-4 { .zan-popup-5 {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

50
docs/examples-dist/switch.vue
View File

@ -1,41 +1,34 @@
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法"> <template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
<div class="demo-switch__wrapper"> <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch> <div class="demo-switch__text">{{ this.switchState ? ' ON' : 'OFF' }}</div>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</div>
</example-block><example-block title="">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</example-block><example-block title="">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</example-block></section></template> </example-block></section></template>
<style> <style>
@component-namespace demo { @component-namespace demo {
@b switch { @b switch {
padding: 0 15px 15px; .examples {
@e wrapper {
width: 33.33%;
float: left;
text-align: center; text-align: center;
} }
@e text { @e text {
margin: 20px 0; margin: 20px auto;
} }
} }
} }
@ -48,11 +41,6 @@ export default {
switchState: true switchState: true
}; };
}, },
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: { methods: {
updateState(newState) { updateState(newState) {
this.switchState = newState; this.switchState = newState;

109
docs/examples-docs/switch.md
View File

@ -1,16 +1,12 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b switch { @b switch {
padding: 0 15px 15px; .examples {
@e wrapper {
width: 33.33%;
float: left;
text-align: center; text-align: center;
} }
@e text { @e text {
margin: 20px 0; margin: 20px auto;
} }
} }
} }
@ -23,11 +19,6 @@ export default {
switchState: true switchState: true
}; };
}, },
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: { methods: {
updateState(newState) { updateState(newState) {
this.switchState = newState; this.switchState = newState;
@ -38,30 +29,45 @@ export default {
## Switch 开关 ## Switch 开关
### 基础用法 ### 使用指南
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
#### 全局注册
你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
```js
import Vue from 'vue';
import { Switch } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/switch.css';
Vue.component(Switch.name, Switch);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
```js
import { Switch } from '@youzan/zanui-vue';
export default {
components: {
'zan-switch': Switch
}
};
```
### 代码演示
#### 基础用法
:::demo 基础用法 :::demo 基础用法
```html ```html
<div class="demo-switch__wrapper"> <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch> <div class="demo-switch__text">{{ this.switchState ? ' ON' : 'OFF' }}</div>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</div>
<script> <script>
export default { export default {
@ -70,11 +76,6 @@ export default {
switchState: true switchState: true
}; };
}, },
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: { methods: {
updateState(newState) { updateState(newState) {
this.switchState = newState; this.switchState = newState;
@ -85,6 +86,34 @@ export default {
``` ```
::: :::
#### 禁用状态
设置`disabled`属性为`true`，此时开关不可点击。
:::demo
```html
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
```
:::
#### loading状态
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
:::demo
```html
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
```
:::
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
@ -92,3 +121,9 @@ export default {
| checked | 开关状态 | `boolean` | `false` | `true`, `false` | | checked | 开关状态 | `boolean` | `false` | `true`, `false` |
| loading | loading状态 | `boolean` | `false` | `true`, `false` | | loading | loading状态 | `boolean` | `false` | `true`, `false` |
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` | | disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 开关状态切换时触发 | `value`：开关新的状态值 |

24
packages/switch/src/switch.vue
View File

@ -18,7 +18,7 @@ import ZanLoading from 'packages/loading';
* @param {boolean} [loading=false] - loading状态 * @param {boolean} [loading=false] - loading状态
* *
* @example * @example
* <zan-switch checked="true" disabled="false"></zan-switch> * <zan-switch :checked="true" :disabled="false"></zan-switch>
*/ */
export default { export default {
name: 'zan-switch', name: 'zan-switch',
@ -26,23 +26,17 @@ export default {
'zan-loading': ZanLoading 'zan-loading': ZanLoading
}, },
props: { props: {
checked: { checked: Boolean,
type: Boolean, disabled: Boolean,
default: false loading: Boolean
},
disabled: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
}
}, },
computed: { computed: {
switchStates: function() { switchStates: function() {
const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'), const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off')];
'zan-switch--' + (this.disabled ? 'disabled' : '')];
if (this.disabled) {
switchStates.push('zan-switch--disabled');
}
return switchStates; return switchStates;
} }