[Document] add form components english document (#199)
* [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
GitHub
@@ -1,13 +1,13 @@
|
||||
## 更新日志
|
||||
|
||||
## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
|
||||
### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
|
||||
`2017-10-11`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 Search 样式问题 [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
|
||||
### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
|
||||
`2017-10-11`
|
||||
|
||||
**Improvements**
|
||||
@@ -19,7 +19,7 @@
|
||||
- 修复 windows 下项目编译失败的问题 [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
|
||||
## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
|
||||
### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
|
||||
`2017-10-09`
|
||||
|
||||
**Improvements**
|
||||
|
||||
@@ -24,12 +24,6 @@ export default {
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -38,9 +32,10 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Checkbox } from 'vant';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
@@ -50,7 +45,7 @@ Vue.component(Checkbox.name, Checkbox);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
<van-checkbox v-model="checkbox1">复选框 1</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@@ -66,29 +61,17 @@ export default {
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
<van-checkbox v-model="checkbox2" disabled>复选框 2</van-checkbox>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Checkbox组
|
||||
#### Checkbox 组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
|
||||
:::demo Checkbox组
|
||||
:::demo Checkbox 组
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
@@ -96,7 +79,7 @@ export default {
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
复选框{{ item }}
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
@@ -108,20 +91,14 @@ export default {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
@@ -148,7 +125,7 @@ export default {
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
@@ -156,18 +133,18 @@ export default {
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
@@ -10,7 +10,7 @@ export default {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: 'zhangmin',
|
||||
username: '',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
@@ -19,7 +19,7 @@ export default {
|
||||
|
||||
## Field 输入框
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
@@ -109,7 +109,7 @@ Vue.component(Field.name, Field);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
@@ -121,7 +121,7 @@ Vue.component(Field.name, Field);
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
@@ -129,6 +129,6 @@ Vue.component(Field.name, Field);
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon |
|
||||
|
||||
@@ -77,13 +77,13 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
### API
|
||||
|
||||
#### Row
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 是否显示键盘 | `Boolean` | - | - |
|
||||
| title | 键盘标题 | `String` | `安全输入键盘` | - |
|
||||
| title | 键盘标题 | `String` | - | - |
|
||||
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
||||
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
||||
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| input | 点击按键时触发 | key: 按键内容 |
|
||||
| delete | 点击删除键时触发 | - |
|
||||
|
||||
@@ -77,12 +77,12 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 密码值 | `String` | `''` | - |
|
||||
| length | 密码长度 | `Number` | `6` | - |
|
||||
| length | 密码最大长度 | `Number` | `6` | - |
|
||||
| info | 输入框下方提示 | `String` | - | - |
|
||||
| errorInfo | 输入框下方错误提示 | `String` | - | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
|
||||
@@ -41,8 +41,8 @@ Vue.component(Radio.name, Radio);
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">单选框1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框2</van-radio>
|
||||
<van-radio name="1" v-model="radio1">单选框 1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框 2</van-radio>
|
||||
</div>
|
||||
```
|
||||
```javascript
|
||||
@@ -87,8 +87,8 @@ export default {
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">单选框1</van-radio>
|
||||
<van-radio name="2">单选框2</van-radio>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
```
|
||||
@@ -104,11 +104,11 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
:::demo 与 Cell 组件一起使用
|
||||
```html
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
@@ -131,19 +131,19 @@ export default {
|
||||
|
||||
### Radio API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `Boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
@@ -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: 是否选中开关 |
|
||||
|
||||
@@ -47,15 +47,14 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
|
||||
| after-read | 文件读完之后回调此函数，参数为{file:'选择的文件',content:'读的内容'} | `Function` | | |
|
||||
| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
|
||||
| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
|
||||
| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
Reference in New Issue
Block a user