alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[Document] add form components english document (#199)

Browse Source 
* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases
This commit is contained in:
neverland
2017-10-12 07:06:27 -05:00
committed by GitHub
parent 47576ec47c
commit 9084a662c3
24 changed files with 858 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples-docs/zh-CN/switch.md
+45 -91
View File
@@ -1,17 +1,8 @@
<style>
.demo-switch {
.van-switch {
float: left;
margin: 0 15px;
}
&__text {
display: inline-block;
line-height: 32px;
float: left;
font-size: 14px;
color: #333;
}
}
</style>
@@ -21,21 +12,19 @@ import Dialog from 'packages/dialog';
export default {
data() {
return {
switchState1: true,
switchState2: false,
switchStateTrue: true,
switchStateFalse: false
checked: true,
checked2: true
};
},
methods: {
updateState(newState) {
const state = newState ? '打开' : '关闭';
onInput(checked) {
Dialog.confirm({
title: '提醒',
message: '是否' + state + '开关？'
}).then((action) => {
this.switchState2 = newState;
}, (error) => {});
message: '是否切换开关？'
}).then(() => {
this.checked2 = checked;
});
}
}
};
@@ -56,107 +45,72 @@ Vue.component(Switch.name, Switch);
:::demo 基础用法
```html
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
<div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
<div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
</van-col>
</van-row>
<van-switch v-model="checked" />
```
```javascript
export default {
data() {
return {
switchState1: true,
switchState2: false
checked: true
};
},
methods: {
updateState(newState) {
const state = newState ? '打开' : '关闭';
Dialog.confirm({
title: '提醒',
message: '是否' + state + '开关？'
}).then((action) => {
this.switchState2 = newState;
}, (error) => {
});
}
}
};
```
:::
#### 禁用状态
设置`disabled`属性为`true`，此时开关不可点击。
:::demo 禁用状态
```html
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
<div class="demo-switch__text">打开</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
```
```javascript
export default {
data() {
return {
switchStateTrue: true,
switchStateFalse: false
};
}
};
<van-switch v-model="checked" disabled />
```
:::
#### loading状态
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
:::demo loading状态
#### 加载状态
:::demo 加载状态
```html
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
<div class="demo-switch__text">打开</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
<van-switch v-model="checked" loading />
```
:::
```javascript
#### 高级用法
:::demo 高级用法
```html
<van-switch :value="checked2" @input="onInput" />
```
```js
export default {
data() {
return {
switchStateTrue: true,
switchStateFalse: false
checked2: true
};
},
methods: {
onInput(checked) {
Dialog.confirm({
title: '提醒',
message: '是否切换开关？'
}).then(() => {
this.checked2 = checked;
});
}
}
};
};
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | `false` | `true`, `false` |
| loading | loading状态 | `Boolean` | `false` | `true`, `false` |
| disabled | 禁用状态 | `Boolean` | `false` | `true`, `false` |
| onChange | 开关状态切换回调(默认则改变开关状态) | `Function` | - | - |
| v-model | 开关选中状态 | `Boolean` | `false` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 |