diff --git a/docs/examples-docs/en-US/changelog.md b/docs/examples-docs/en-US/changelog.md index c21fc3be3..9dbeb2a82 100644 --- a/docs/examples-docs/en-US/changelog.md +++ b/docs/examples-docs/en-US/changelog.md @@ -1,13 +1,13 @@ ## Changelog -## [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** - fix Search style bug [\#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** @@ -18,7 +18,7 @@ - fix Filed textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan) - fix compile error in 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** diff --git a/docs/examples-docs/en-US/checkbox.md b/docs/examples-docs/en-US/checkbox.md new file mode 100644 index 000000000..aa4e51439 --- /dev/null +++ b/docs/examples-docs/en-US/checkbox.md @@ -0,0 +1,139 @@ + + +## Checkbox + +### Install +``` javascript +import { Checkbox, CheckboxGroup } from 'vant'; + +Vue.component(Checkbox.name, Checkbox); +Vue.component(CheckboxGroup.name, CheckboxGroup); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html +Checkbox 1 +``` + +```javascript +export default { + data() { + return { + checkbox1: true + }; + } +}; +``` +::: + +#### Disabled + +:::demo Disabled +```html +Checkbox 2 +``` +::: + +#### CheckboxGroup +When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model. + +:::demo CheckboxGroup +```html + + + Checkbox {{ item }} + + +``` + +```javascript +export default { + data() { + return { + list: ['a', 'b', 'c'], + result: ['a', 'b'] + }; + }, + + watch: { + result(val) { + console.log(val); + } + } +}; +``` +::: + +#### Inside a Cell + +:::demo Inside a Cell +```html + + + + Checkbox{{ item }} + + + +``` + +```javascript +export default { + data() { + return { + list: ['a', 'b', 'c'], + result: ['a', 'b'] + }; + } +}; +``` +::: + +### Checkbox API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| name | Checkbox name | `Boolean` | `false` | - | +| disabled | Diable checkbox | `Boolean` | `false` | - | +| shape | Checkbox shape | `String` | `round` | `square` | + +### CheckboxGroup API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| disabled | Disable all checkboxes | `Boolean` | `false` | - | + +### Checkbox Event + +| Event | Description | Parameters | +|-----------|-----------|-----------| +| change | Triggered when value changed | current value | + +### CheckboxGroup Event + +| Event | Description | Parameters | +|-----------|-----------|-----------| +| change | Triggered when value changed | current value | diff --git a/docs/examples-docs/en-US/field.md b/docs/examples-docs/en-US/field.md new file mode 100644 index 000000000..b00e7f3f8 --- /dev/null +++ b/docs/examples-docs/en-US/field.md @@ -0,0 +1,126 @@ + + +## Field + +### Install +``` javascript +import { Field } from 'vant'; + +Vue.component(Field.name, Field); +``` + +### Usage + +#### Basic Usage +The value of filed is bound with v-model. + +:::demo Basic Usage +```html + + + +``` +::: + +#### Custom Type +Use `type` prop to custom diffrent type fileds. + +:::demo Custom Type +```html + + + + + + + +``` +::: + +#### Disabled + +:::demo Disabled +```html + + + +``` +::: + +#### Error Info + +:::demo Error Info +```html + + + +``` +::: + +#### Auto resize +Textarea Filed can be auto resize when has `autosize` prop + +:::demo Auto resize +```html + + + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| type | Filed type | `String` | `text` | `number` `email`
`textarea` `tel`
`datetime` `date`
`password` `url` | +| value | Filed value | `String` | - | - | +| label | Filed label | `String` | - | - | +| disabled | Disable field | `Boolean` | `false` | - | +| error | Whether to show error info | `Boolean` | `false` | - | +| autosize | Textarea auto resize | `Boolean` | `false` | - | +| icon | Right side Icon name | `String` | - | - | + +### Event + +| Event | Description | Parameters | +|-----------|-----------|-----------| +| focus | Triggered when filed get focused | - | +| blur | Triggered when blur filed | - | +| click-icon | Triggered when click the icon of filed | - | + +### Slot + +| name | Description | +|-----------|-----------| +| icon | Custom icon | diff --git a/docs/examples-docs/en-US/layout.md b/docs/examples-docs/en-US/layout.md index a73beec62..60608f88f 100644 --- a/docs/examples-docs/en-US/layout.md +++ b/docs/examples-docs/en-US/layout.md @@ -1,27 +1,3 @@ - - ## Layout Quickly and easily create layouts with `van-row` and `van-col` @@ -36,7 +12,7 @@ Vue.component(Col.name, Col); ### Usage -#### Basic +#### Basic Usage Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid. @@ -77,14 +53,14 @@ Set grid spacing using `gutter` attribute. The default value is 0 ### API #### Row -| Attribute | Description | Type | Default | Accepted Values | +| Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | gutter | grid spacing（px） | `String | Number` | - | - | | prefix | className prefix | `String` | `van` | - | #### Column -| Attribute | Description | Type | Default | Accepted Values | +| Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| span | number of column the grid spans | `String | Number` | - | - | +| span | number of column the grid spans | `String | Number` | - | - | | offset | number of spacing on the left side of the grid | `String | Number` | - | - | | prefix | className prefix | `String` | `van` | - | diff --git a/docs/examples-docs/en-US/number-keyboard.md b/docs/examples-docs/en-US/number-keyboard.md new file mode 100644 index 000000000..a8eec6e62 --- /dev/null +++ b/docs/examples-docs/en-US/number-keyboard.md @@ -0,0 +1,93 @@ + + +## NumberKeyboard + +### Install +``` javascript +import { NumberKeyboard } from 'vant'; + +Vue.component(NumberKeyboard.name, NumberKeyboard); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + ShowKeyboard + + + + HideKeyboard + + + +``` + +```javascript +export default { + data() { + return { + showKeyboard: true + } + }, + + methods: { + onInput(value) { + Toast(value); + }, + onDelete() { + Toast('delete'); + } + } +} +``` +::: + + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| show | Whether to show keyboard | `Boolean` | - | - | +| title | Keyboard title | `String` | - | - | +| extraKey | Content of bottom left key | `String` | `''` | - | +| zIndex | Keyboard z-index | `Number` | `100` | - | +| transition | Whether to show transition animation | `Boolean` | `true` | - | +| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| input | Triggered when keydown | key: Content of the key | +| delete | Triggered when press delete key | - | +| blur | Triggered when blur keyboard | - | +| show | Triggered when keyboard is fully displayed. | - | +| hide | Triggered when keyboard is fully hidden. | - | diff --git a/docs/examples-docs/en-US/password-input.md b/docs/examples-docs/en-US/password-input.md new file mode 100644 index 000000000..af90f5a41 --- /dev/null +++ b/docs/examples-docs/en-US/password-input.md @@ -0,0 +1,88 @@ + + +## PasswordInput +The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component. + +### Install +``` javascript +import { PasswordInput, NumberKeyBoard } from 'vant'; + +Vue.component(PasswordInput.name, PasswordInput); +Vue.component(NumberKeyBoard.name, NumberKeyBoard); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + + + + +``` + +```javascript +export default { + data() { + return { + value: '', + showKeyboard: true + } + }, + + methods: { + onInput(key) { + this.value = (this.value + key).slice(0, 6); + }, + onDelete() { + this.value = this.value.slice(0, this.value.length - 1); + } + } +} +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| value | Password value | `String` | `''` | - | +| length | Maxlength of password | `Number` | `6` | - | +| info | Bottom info | `String` | - | - | +| errorInfo | Bottom error info | `String` | - | - | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| focus | Triggered when input get focused | - | diff --git a/docs/examples-docs/en-US/quickstart.md b/docs/examples-docs/en-US/quickstart.md index 682478802..f11e3b68e 100644 --- a/docs/examples-docs/en-US/quickstart.md +++ b/docs/examples-docs/en-US/quickstart.md @@ -10,7 +10,7 @@ npm i vant -S ### Usage -#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐) +#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) ```bash # Install babel-plugin-import npm i babel-plugin-import -D diff --git a/docs/examples-docs/en-US/radio.md b/docs/examples-docs/en-US/radio.md new file mode 100644 index 000000000..f6f019bab --- /dev/null +++ b/docs/examples-docs/en-US/radio.md @@ -0,0 +1,131 @@ + + +## Radio + +### Install +``` javascript +import { Radio } from 'vant'; + +Vue.component(Radio.name, Radio); +``` + +### Usage + +#### Basic Usage +Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked. + +:::demo Basic Usage +```html +
+ Radio 1 + Radio 2 +
+``` +```javascript +export default { + data() { + return { + radio1: '1' + } + } +}; +``` +::: + +#### Disabled + +:::demo Disabled +```html +
+ Disabled + Disabled and checked +
+``` + +```javascript +export default { + data() { + return { + radio2: '2' + } + } +}; +``` +::: + +#### RadioGroup +When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`. + +:::demo RadioGroup +```html +
+ + Radio 1 + Radio 2 + +
+``` + +```javascript +export default { + data() { + return { + radio3: '1' + } + } +}; +``` +::: + +#### With Cell + +:::demo With Cell +```html + + + Radio 1 + Radio 2 + + +``` + +```javascript +export default { + data() { + return { + radio4: '1' + } + } +}; +``` +::: + +### Radio API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| disabled | Diable radio | `Boolean` | `false` | - | +| name | Radio name | `Boolean` | `false` | - | + +### RadioGroup API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| disabled | Diable all radios | `Boolean` | `false` | - | + +### RadioGroup Event + +| Event | Description | Parameters | +|-----------|-----------|-----------| +| change | Triggered when value changed | current value | diff --git a/docs/examples-docs/en-US/switch.md b/docs/examples-docs/en-US/switch.md new file mode 100644 index 000000000..b42062673 --- /dev/null +++ b/docs/examples-docs/en-US/switch.md @@ -0,0 +1,112 @@ + + +## Switch + +### Install +``` javascript +import { Switch } from 'vant'; + +Vue.component(Switch.name, Switch); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` + +```javascript +export default { + data() { + return { + checked: true + }; + } +}; +``` +::: + +#### Disabled + +:::demo Disabled +```html + +``` +::: + +#### Loading + + +:::demo Loading +```html + +``` +::: + +#### Advanced usage +:::demo Advanced usage +```html + +``` +```js +export default { + data() { + return { + checked2: true + }; + }, + + methods: { + onInput(checked) { + Dialog.confirm({ + title: 'Confirm', + message: 'Are you sure to toggle switch?' + }).then(() => { + this.checked2 = checked; + }); + } + } +}; +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | Check status of Switch | `Boolean` | `false` | - | +| loading | Whether to show loading icon | `Boolean` | `false` | - | +| disabled | Disable switch | `Boolean` | `false` | - | + +### Event + +| Event | Description | Parameters | +|-----------|-----------|-----------| +| change | Triggered when check status changed | checked: is switch checked | diff --git a/docs/examples-docs/zh-CN/changelog.md b/docs/examples-docs/zh-CN/changelog.md index 65c651205..730f370c8 100644 --- a/docs/examples-docs/zh-CN/changelog.md +++ b/docs/examples-docs/zh-CN/changelog.md @@ -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** diff --git a/docs/examples-docs/zh-CN/checkbox.md b/docs/examples-docs/zh-CN/checkbox.md index d43b284f1..117a471cf 100644 --- a/docs/examples-docs/zh-CN/checkbox.md +++ b/docs/examples-docs/zh-CN/checkbox.md @@ -24,12 +24,6 @@ export default { ], result: ['a', 'b'] }; - }, - - watch: { - result(val) { - console.log(val); - } } }; @@ -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 -复选框1 +复选框 1 ``` ```javascript @@ -66,29 +61,17 @@ export default { #### 禁用状态 -设置`disabled`属性即可，此时`Checkbox`不能点击。 - :::demo 禁用状态 ```html -复选框2 -``` - -```javascript -export default { - data() { - return { - checkbox2: true - }; - } -}; +复选框 2 ``` ::: -#### 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 - 复选框{{ item }} + 复选框 {{ item }} ``` @@ -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 | 当绑定值变化时触发的事件 | 当前组件的值 | diff --git a/docs/examples-docs/zh-CN/field.md b/docs/examples-docs/zh-CN/field.md index 4865b5746..ecffea8bd 100644 --- a/docs/examples-docs/zh-CN/field.md +++ b/docs/examples-docs/zh-CN/field.md @@ -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`
`textarea` `tel`
`datetime` `date`
`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 | diff --git a/docs/examples-docs/zh-CN/layout.md b/docs/examples-docs/zh-CN/layout.md index 2fe09d2a9..ae40d3e92 100644 --- a/docs/examples-docs/zh-CN/layout.md +++ b/docs/examples-docs/zh-CN/layout.md @@ -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` | - | - | diff --git a/docs/examples-docs/zh-CN/number-keyboard.md b/docs/examples-docs/zh-CN/number-keyboard.md index 362d1d1f8..24ece5750 100644 --- a/docs/examples-docs/zh-CN/number-keyboard.md +++ b/docs/examples-docs/zh-CN/number-keyboard.md @@ -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 | 点击删除键时触发 | - | diff --git a/docs/examples-docs/zh-CN/password-input.md b/docs/examples-docs/zh-CN/password-input.md index b520798e3..7fe4bfaa4 100644 --- a/docs/examples-docs/zh-CN/password-input.md +++ b/docs/examples-docs/zh-CN/password-input.md @@ -77,12 +77,12 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | value | 密码值 | `String` | `''` | - | -| length | 密码长度 | `Number` | `6` | - | +| length | 密码最大长度 | `Number` | `6` | - | | info | 输入框下方提示 | `String` | - | - | | errorInfo | 输入框下方错误提示 | `String` | - | - | ### Event -| 事件名 | 说明 | 参数 | +| 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | focus | 输入框聚焦时触发 | - | diff --git a/docs/examples-docs/zh-CN/radio.md b/docs/examples-docs/zh-CN/radio.md index c1f438f17..5df4314e9 100644 --- a/docs/examples-docs/zh-CN/radio.md +++ b/docs/examples-docs/zh-CN/radio.md @@ -41,8 +41,8 @@ Vue.component(Radio.name, Radio); :::demo 基础用法 ```html
- 单选框1 - 单选框2 + 单选框 1 + 单选框 2
``` ```javascript @@ -87,8 +87,8 @@ export default { ```html
- 单选框1 - 单选框2 + 单选框 1 + 单选框 2
``` @@ -104,11 +104,11 @@ export default { ``` ::: -#### 与Cell组件一起使用 +#### 与 Cell 组件一起使用 此时你需要再引入`Cell`和`CellGroup`组件。 -:::demo 与Cell组件一起使用 +:::demo 与 Cell 组件一起使用 ```html @@ -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 | 当绑定值变化时触发的事件 | 当前组件的值 | diff --git a/docs/examples-docs/zh-CN/switch.md b/docs/examples-docs/zh-CN/switch.md index d068cf9ce..a1c4649da 100644 --- a/docs/examples-docs/zh-CN/switch.md +++ b/docs/examples-docs/zh-CN/switch.md @@ -1,17 +1,8 @@ @@ -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 - - - -
{{ switchState1 ? ' 打开' : '关闭' }}
- - - -
{{ switchState2 ? ' 打开' : '关闭' }}
- - + ``` ```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 - - - -
打开
- - - -
关闭
- - -``` - -```javascript -export default { - data() { - return { - switchStateTrue: true, - switchStateFalse: false - }; - } -}; + ``` ::: -#### loading状态 - -设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。 - -:::demo loading状态 +#### 加载状态 +:::demo 加载状态 ```html - - - -
打开
- - - -
关闭
- - + ``` +::: -```javascript +#### 高级用法 +:::demo 高级用法 +```html + +``` +```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: 是否选中开关 | diff --git a/docs/examples-docs/zh-CN/uploader.md b/docs/examples-docs/zh-CN/uploader.md index 2e06a21d4..914982d6a 100644 --- a/docs/examples-docs/zh-CN/uploader.md +++ b/docs/examples-docs/zh-CN/uploader.md @@ -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 diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index c6453e560..ed205e30a 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -305,7 +305,32 @@ module.exports = { }, { "groupName": "Form", - "list": [] + "list": [ + { + "path": "/checkbox", + "title": "Checkbox" + }, + { + "path": "/field", + "title": "Field" + }, + { + "path": "/number-keyboard", + "title": "NumberKeyboard" + }, + { + "path": "/password-input", + "title": "PasswordInput" + }, + { + "path": "/radio", + "title": "Radio" + }, + { + "path": "/switch", + "title": "Switch" + } + ] }, ] } diff --git a/package.json b/package.json index 8725e9994..4afefe636 100644 --- a/package.json +++ b/package.json @@ -104,20 +104,20 @@ "run-sequence": "^2.1.0", "sinon": "^2.4.1", "sinon-chai": "^2.12.0", - "style-loader": "^0.18.2", + "style-loader": "^0.19.0", "uppercamelcase": "^3.0.0", - "url-loader": "^0.5.9", + "url-loader": "^0.6.2", "vue": "^2.4.2", - "vue-loader": "^13.0.4", + "vue-loader": "^13.3.0", "vue-markdown-loader": "^2.1.0", - "vue-router": "^2.7.0", + "vue-router": "^3.0.0", "vue-sfc-compiler": "^0.0.2", "vue-style-loader": "^3.0.0", "vue-template-compiler": "^2.4.2", - "webpack": "^3.5.5", + "webpack": "^3.7.1", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.7.1", "webpack-merge": "^4.1.0", - "zan-doc": "^0.3.5" + "zan-doc": "^0.3.6" } } diff --git a/packages/number-keyboard/index.vue b/packages/number-keyboard/index.vue index 52ddb036e..0c185b14f 100644 --- a/packages/number-keyboard/index.vue +++ b/packages/number-keyboard/index.vue @@ -10,7 +10,7 @@ @touchcancel="blurKey" @animationend="onAnimationEnd" > -
+
{{ title }}
-
+
@@ -12,39 +12,22 @@ import Loading from '../loading'; export default { name: 'van-switch', + components: { [Loading.name]: Loading }, + props: { value: Boolean, - disabled: Boolean, loading: Boolean, - onChange: Function + disabled: Boolean }, - data() { - return { - checked: this.value - }; - }, - watch: { - checked(val) { - this.$emit('input', val); - }, - value(val) { - this.checked = val; - } - }, methods: { - /* - * 开关状态交互。 - */ - toggleState: function() { - if (this.disabled || this.loading) return; - if (this.onChange) { - this.onChange(!this.checked); - } else { - this.checked = !this.checked; + toggleState() { + if (!this.disabled && !this.loading) { + this.$emit('input', !this.value); + this.$emit('change', !this.value); } } } diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js index d1cadd5ca..44ee52edb 100644 --- a/test/unit/specs/switch.spec.js +++ b/test/unit/specs/switch.spec.js @@ -1,5 +1,4 @@ import Switch from 'packages/switch'; -import Vue from 'vue'; import VanLoading from 'packages/loading'; import { mount } from 'avoriaz'; @@ -88,43 +87,12 @@ describe('Switch', () => { } }); + wrapper.vm.$on('input', val => { + wrapper.vm.value = val; + }); + expect(wrapper.hasClass('van-switch--off')).to.be.true; wrapper.trigger('click'); expect(wrapper.hasClass('van-switch--on')).to.be.true; }); - - it('click should call callback function', () => { - const stub = sinon.stub(); - wrapper = mount(Switch, { - propsData: { - value: false, - onChange: stub - } - }); - - expect(wrapper.hasClass('van-switch--off')).to.be.true; - wrapper.trigger('click'); - expect(wrapper.hasClass('van-switch--off')).to.be.true; - expect(stub.calledOnce).to.be.true; - expect(stub.calledWith(true)); - }); - - it('toggle switch value from v-model', function(done) { - wrapper = mount(Switch, { - propsData: { - value: false - } - }); - const eventStub = sinon.stub(wrapper.vm, '$emit'); - - expect(wrapper.hasClass('van-switch--off')).to.be.true; - wrapper.vm.value = true; - wrapper.update(); - Vue.nextTick(() => { - expect(wrapper.hasClass('van-switch--on')).to.be.true; - expect(eventStub.calledOnce).to.be.true; - expect(eventStub.calledWith('input')); - done(); - }); - }); }); diff --git a/yarn.lock b/yarn.lock index 5dcf0a836..8883669d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4857,11 +4857,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16, dependencies: mime-db "~1.30.0" -mime@1.3.x: - version "1.3.6" - resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0" - -mime@1.4.1, mime@^1.3.4: +mime@1.4.1, mime@^1.3.4, mime@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6" @@ -7016,9 +7012,9 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -style-loader@^0.18.2: - version "0.18.2" - resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb" +style-loader@^0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759" dependencies: loader-utils "^1.0.2" schema-utils "^0.3.0" @@ -7362,12 +7358,13 @@ uppercamelcase@^3.0.0: dependencies: camelcase "^4.1.0" -url-loader@^0.5.9: - version "0.5.9" - resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295" +url-loader@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7" dependencies: loader-utils "^1.0.2" - mime "1.3.x" + mime "^1.4.1" + schema-utils "^0.3.0" url-parse@1.0.x: version "1.0.5" @@ -7528,17 +7525,17 @@ vue-add-globals@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-1.0.1.tgz#151f241426e70cbc790a1f31bb0f4435d7575efc" -vue-hot-reload-api@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.1.tgz#1ba6712166182fd651753804b9d8d8d02d855579" +vue-hot-reload-api@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz#9a21b35ced3634434a43ee80efb7350ea8fb206d" vue-lazyload@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.1.3.tgz#527a1e3e6ba6509fe27326d34f0ab9687c9a1e95" -vue-loader@^13.0.4: - version "13.2.1" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.2.1.tgz#0c6cba3154d2b325d17dde2c0be52c34b888bc6d" +vue-loader@^13.3.0: + version "13.3.0" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.3.0.tgz#3bf837d490ba5dea6fc07e0835ffa6c688c8af33" dependencies: consolidate "^0.14.0" hash-sum "^1.0.2" @@ -7550,7 +7547,7 @@ vue-loader@^13.0.4: prettier "^1.7.0" resolve "^1.4.0" source-map "^0.6.1" - vue-hot-reload-api "^2.1.0" + vue-hot-reload-api "^2.2.0" vue-style-loader "^3.0.0" vue-template-es2015-compiler "^1.6.0" @@ -7563,9 +7560,9 @@ vue-markdown-loader@^2.1.0: loader-utils "^0.2.15" markdown-it "^6.0.5" -vue-router@^2.7.0: - version "2.7.0" - resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1" +vue-router@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.0.tgz#458092ad5d8e3b8d26661cfbcbf46c120f8ea1ae" vue-sfc-compiler@^0.0.2: version "0.0.2" @@ -7689,9 +7686,9 @@ webpack-sources@^1.0.1: source-list-map "^2.0.0" source-map "~0.5.3" -webpack@^3.5.5: - version "3.6.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc" +webpack@^3.7.1: + version "3.7.1" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.7.1.tgz#6046b5c415ff7df7a0dc54c5b6b86098e8b952da" dependencies: acorn "^5.0.0" acorn-dynamic-import "^2.0.0" @@ -7913,9 +7910,9 @@ yeast@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" -zan-doc@^0.3.5: - version "0.3.5" - resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.5.tgz#f0aa9cd3dcca524a58acd606d34dd17d223f4560" +zan-doc@^0.3.6: + version "0.3.6" + resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.6.tgz#fd21ebde256898c5e057c9d169c848666bf41420" dependencies: cheerio "0.22.0" decamelize "^1.2.0"