diff --git a/docs/examples-docs/en-US/actionsheet.md b/docs/examples-docs/en-US/actionsheet.md index 5e05ae841..b85edf8f1 100644 --- a/docs/examples-docs/en-US/actionsheet.md +++ b/docs/examples-docs/en-US/actionsheet.md @@ -145,11 +145,11 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| actions | 行动按钮数组 | `Array` | `[]` | | -| title | 标题 | `String` | | | -| cancelText | 取消按钮文案 | `String` | | | -| overlay | 是否显示遮罩 | `Boolean` | | | -| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | | +| actions | 行动按钮数组 | `Array` | `[]` | - | +| title | 标题 | `String` | - | - | +| cancelText | 取消按钮文案 | `String` | - | - | +| overlay | 是否显示遮罩 | `Boolean` | - | - | +| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - | ### actions diff --git a/docs/examples-docs/en-US/area.md b/docs/examples-docs/en-US/area.md index 322c650e1..012d9e371 100644 --- a/docs/examples-docs/en-US/area.md +++ b/docs/examples-docs/en-US/area.md @@ -68,13 +68,13 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| value | 当前选中的省市区`code` | `String` | - | | -| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | | -| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | | +| value | 当前选中的省市区`code` | `String` | - | - | +| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - | +| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - | ### Event -| Event | Description | 回调参数 | +| Event | Description | Arguments | |-----------|-----------|-----------| | confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 | | cancel | 点击取消按钮时 | - | diff --git a/docs/examples-docs/en-US/datetime-picker.md b/docs/examples-docs/en-US/datetime-picker.md index 9564f7a7a..103907b90 100644 --- a/docs/examples-docs/en-US/datetime-picker.md +++ b/docs/examples-docs/en-US/datetime-picker.md @@ -108,16 +108,16 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | | +| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - | | type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' | -| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | | -| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | | -| minHour | 可选的最小小时 | Number | 0 | | -| maxHour | 可选的最大小时 | Number | 23 | | +| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - | +| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - | +| minHour | 可选的最小小时 | Number | 0 | - | +| maxHour | 可选的最大小时 | Number | 23 | - | ### Event -| Event | Description | 回调参数 | +| Event | Description | Arguments | |-----------|-----------|-----------| | change | 当值变化时触发的事件 | picker 实例 | | confirm | 点击完成按钮时触发的事件 | 当前 value | diff --git a/docs/examples-docs/en-US/dialog.md b/docs/examples-docs/en-US/dialog.md index fc4bdb2c7..f7a53e34a 100644 --- a/docs/examples-docs/en-US/dialog.md +++ b/docs/examples-docs/en-US/dialog.md @@ -113,12 +113,12 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| title | 标题 | `String` | | | -| message | 内容 | `String` | | | -| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | | -| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | | -| confirmButtonText | 确认按钮的文案 | `String` | `确认` | | -| cancelButtonText | 取消按钮的文案 | `String` | `取消` | | -| overlay | 是否展示蒙层 | `Boolean` | `true` | | -| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | -| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | | +| title | 标题 | `String` | - | - | +| message | 内容 | `String` | - | - | +| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - | +| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - | +| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - | +| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - | +| overlay | 是否展示蒙层 | `Boolean` | `true` | - | +| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - | +| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - | diff --git a/docs/examples-docs/en-US/lazyload.md b/docs/examples-docs/en-US/lazyload.md index f9bc2a2df..0d876e0f1 100644 --- a/docs/examples-docs/en-US/lazyload.md +++ b/docs/examples-docs/en-US/lazyload.md @@ -113,7 +113,7 @@ export default { | loading | Src of the image while loading | `String` | - | - | | error | Src of the image upon load fail | `String` | - | - | | preload | Proportion of pre-loading height | `String` | - | - | -| attempt | Attempts count | `Number` | `3` | | +| attempt | Attempts count | `Number` | `3` | - | | listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - | | adapter | Dynamically modify the attribute of element | `Object` | - | - | | filter | The image's listener filter | `Object` | - | - | diff --git a/docs/examples-docs/en-US/picker.md b/docs/examples-docs/en-US/picker.md index a821ab06a..2cd2bad84 100644 --- a/docs/examples-docs/en-US/picker.md +++ b/docs/examples-docs/en-US/picker.md @@ -143,11 +143,11 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | | -| itemHeight | 选中元素区高度 | `Number` | `44` | | -| columns | 对象数组，配置每一列显示的数据 | `Array` | | | -| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | | -| title | 在toolbar上显示的标题文字 | `String` | | | +| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - | +| itemHeight | 选中元素区高度 | `Number` | `44` | - | +| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - | +| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - | +| title | 在toolbar上显示的标题文字 | `String` | - | - | ### columns diff --git a/docs/examples-docs/en-US/popup.md b/docs/examples-docs/en-US/popup.md index 919613f32..0c3e42158 100644 --- a/docs/examples-docs/en-US/popup.md +++ b/docs/examples-docs/en-US/popup.md @@ -115,5 +115,5 @@ export default { | lockOnScroll | Lock body scroll | `Boolean` | `false` | - | | position | Position | `String` | - | `top` `bottom` `right` `left` | | closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - | -| transition | Transition | `String` | `popup-slide` | | +| transition | Transition | `String` | `popup-slide` | - | | preventScroll | Prevent background scroll | `Boolean` | `false` | - | diff --git a/docs/examples-docs/en-US/progress.md b/docs/examples-docs/en-US/progress.md index dbd3b1f28..7cc0948a8 100644 --- a/docs/examples-docs/en-US/progress.md +++ b/docs/examples-docs/en-US/progress.md @@ -10,8 +10,7 @@ Vue.component(Progress.name, Progress); ### Usage #### Basic Usage - -进度条默认为蓝色，使用`percentage`属性来设置当前进度 +Use 'percentage' prop to set current progress :::demo Basic Usage ```html @@ -22,9 +21,9 @@ Vue.component(Progress.name, Progress); ::: -#### 进度条置灰 +#### Inactive -:::demo 进度条置灰 +:::demo Inactive ```html @@ -33,15 +32,14 @@ Vue.component(Progress.name, Progress); ::: -#### 样式定制 +#### Custom Style +Use `pivot-text` to custom text，use `color` to custom bar color -可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 - -:::demo 样式定制 +:::demo Custom Style ```html - - - + + + ``` ::: @@ -49,8 +47,8 @@ Vue.component(Progress.name, Progress); | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| inactive | 是否置灰 | `Boolean` | `false` | | -| percentage | 进度百分比 | `Number` | `false` | `0-100` | -| pivotText | 文字显示 | `String` | 百分比文字 | - | -| color | 进度条颜色 | `String` | `#38f` | hexvalue | -| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue | +| inactive | Whether to be gray | `Boolean` | `false` | - | +| percentage | Percentage | `Number` | `false` | `0-100` | +| pivotText | Text | `String` | percentage | - | +| color | Color | `String` | `#38f` | hexvalue | +| textColor | Text color | `String` | `#fff` | hexvalue | diff --git a/docs/examples-docs/en-US/search.md b/docs/examples-docs/en-US/search.md index 2f8635192..2509ee80a 100644 --- a/docs/examples-docs/en-US/search.md +++ b/docs/examples-docs/en-US/search.md @@ -1,22 +1,19 @@ - - #### Basic Usage -使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件 -注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串 :::demo Basic Usage ```html -

当即将滚动到元素底部时，会自动加载更多

+

This list will load items will scroll to bottom.

``` + +```js +export default { + data() { + return { + list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + disabled: false + }; + }, + + directives: { + WaterfallLower: Waterfall('lower') + }, + + methods: { + loadMore() { + this.disabled = true; + setTimeout(() => { + for (let i = 0; i < 5; i ++) { + this.list.push(this.list.length); + } + this.disabled = false; + }, 200); + } + } +}; +``` ::: ### API | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | | -| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | | -| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | | -| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | | - +| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - | - | +| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - | - | +| waterfall-disabled | Key of the property to control disable status in instance | `String` | - | - | +| waterfall-offset | Offset to trigger callback function | `Number` | `300` | - | diff --git a/docs/examples-docs/zh-CN/actionsheet.md b/docs/examples-docs/zh-CN/actionsheet.md index 5ae90bf7c..c8aab1b84 100644 --- a/docs/examples-docs/zh-CN/actionsheet.md +++ b/docs/examples-docs/zh-CN/actionsheet.md @@ -161,11 +161,11 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| actions | 行动按钮数组 | `Array` | `[]` | | -| title | 标题 | `String` | | | -| cancelText | 取消按钮文案 | `String` | | | -| overlay | 是否显示遮罩 | `Boolean` | | | -| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | | +| actions | 行动按钮数组 | `Array` | `[]` | - | +| title | 标题 | `String` | - | - | +| cancelText | 取消按钮文案 | `String` | - | - | +| overlay | 是否显示遮罩 | `Boolean` | - | - | +| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - | ### actions diff --git a/docs/examples-docs/zh-CN/area.md b/docs/examples-docs/zh-CN/area.md index 3abaaf839..5dd5198c2 100644 --- a/docs/examples-docs/zh-CN/area.md +++ b/docs/examples-docs/zh-CN/area.md @@ -68,9 +68,9 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| value | 当前选中的省市区`code` | `String` | - | | -| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | | -| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | | +| value | 当前选中的省市区`code` | `String` | - | - | +| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - | +| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - | ### Event diff --git a/docs/examples-docs/zh-CN/datetime-picker.md b/docs/examples-docs/zh-CN/datetime-picker.md index 24c8a3d4a..f0e39287e 100644 --- a/docs/examples-docs/zh-CN/datetime-picker.md +++ b/docs/examples-docs/zh-CN/datetime-picker.md @@ -108,12 +108,12 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | | +| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - | | type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' | -| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | | -| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | | -| minHour | 可选的最小小时 | Number | 0 | | -| maxHour | 可选的最大小时 | Number | 23 | | +| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - | +| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - | +| minHour | 可选的最小小时 | Number | 0 | - | +| maxHour | 可选的最大小时 | Number | 23 | - | ### Event diff --git a/docs/examples-docs/zh-CN/dialog.md b/docs/examples-docs/zh-CN/dialog.md index 5b6954543..d549a9169 100644 --- a/docs/examples-docs/zh-CN/dialog.md +++ b/docs/examples-docs/zh-CN/dialog.md @@ -121,12 +121,12 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| title | 标题 | `String` | | | -| message | 内容 | `String` | | | -| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | | -| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | | -| confirmButtonText | 确认按钮的文案 | `String` | `确认` | | -| cancelButtonText | 取消按钮的文案 | `String` | `取消` | | -| overlay | 是否展示蒙层 | `Boolean` | `true` | | -| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | -| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | | +| title | 标题 | `String` | - | - | +| message | 内容 | `String` | - | - | +| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - | +| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - | +| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - | +| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - | +| overlay | 是否展示蒙层 | `Boolean` | `true` | - | +| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - | +| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - | diff --git a/docs/examples-docs/zh-CN/lazyload.md b/docs/examples-docs/zh-CN/lazyload.md index c8a77f621..97c266bd9 100644 --- a/docs/examples-docs/zh-CN/lazyload.md +++ b/docs/examples-docs/zh-CN/lazyload.md @@ -144,7 +144,7 @@ export default { | loading | 加载时的图片 | `String` | - | - | | error | 错误时的图片 | `String` | - | - | | preload | 预加载高度的比例 | `String` | - | - | -| attempt | 尝试次数 | `Number` | `3` | | +| attempt | 尝试次数 | `Number` | `3` | - | | listenEvents | 监听的事件 | `Array` | `scroll`等 | - | | adapter | 适配器 | `Object` | - | - | | filter | 图片url过滤 | `Object` | - | - | diff --git a/docs/examples-docs/zh-CN/picker.md b/docs/examples-docs/zh-CN/picker.md index 01dcfbcfd..c4831c120 100644 --- a/docs/examples-docs/zh-CN/picker.md +++ b/docs/examples-docs/zh-CN/picker.md @@ -143,11 +143,11 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | | -| itemHeight | 选中元素区高度 | `Number` | `44` | | -| columns | 对象数组，配置每一列显示的数据 | `Array` | | | -| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | | -| title | 在toolbar上显示的标题文字 | `String` | | | +| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - | +| itemHeight | 选中元素区高度 | `Number` | `44` | - | +| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - | +| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - | +| title | 在toolbar上显示的标题文字 | `String` | - | - | ### columns diff --git a/docs/examples-docs/zh-CN/popup.md b/docs/examples-docs/zh-CN/popup.md index 8d8e6531a..187725895 100644 --- a/docs/examples-docs/zh-CN/popup.md +++ b/docs/examples-docs/zh-CN/popup.md @@ -150,5 +150,5 @@ export default { | lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - | | position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` | | closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - | -| transition | 弹出层的`transition` | `String` | `popup-slide` | | +| transition | 弹出层的`transition` | `String` | `popup-slide` | - | | preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - | diff --git a/docs/examples-docs/zh-CN/progress.md b/docs/examples-docs/zh-CN/progress.md index 1d064ad3e..66dde381e 100644 --- a/docs/examples-docs/zh-CN/progress.md +++ b/docs/examples-docs/zh-CN/progress.md @@ -57,7 +57,7 @@ Vue.component(Progress.name, Progress); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| inactive | 是否置灰 | `Boolean` | `false` | | +| inactive | 是否置灰 | `Boolean` | `false` | - | | percentage | 进度百分比 | `Number` | `false` | `0-100` | | pivotText | 文字显示 | `String` | 百分比文字 | - | | color | 进度条颜色 | `String` | `#38f` | hexvalue | diff --git a/docs/examples-docs/zh-CN/search.md b/docs/examples-docs/zh-CN/search.md index 12d97a0c7..ee2110fa1 100644 --- a/docs/examples-docs/zh-CN/search.md +++ b/docs/examples-docs/zh-CN/search.md @@ -2,29 +2,26 @@ export default { data() { return { - search: '', - basicSearch: '', - slotSearch: '' + value: '', }; }, methods: { - goSearch() { - alert(this.search); + onSearch() { + Toast(this.value); }, - goSlotSearch() { - alert(this.slotSearch); - }, - handleCancel() { - alert('cancel'); + onCancel() { + Toast('cancel'); } } }; @@ -40,17 +37,15 @@ Vue.component(Search.name, Search); ### 代码演示 #### 基础用法 - `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 :::demo 基础用法 ```html - + ``` ::: #### 监听对应事件 - `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发 Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮 @@ -59,28 +54,26 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即 ```html
+ @search="onSearch" + @cancel="onCancel"> +
``` ::: #### 自定义行动按钮 - `van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。 :::demo 自定义行动按钮 ```html - + @search="onSearch"> +
搜索
 ``` ::: @@ -89,9 +82,9 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即 | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| placeholder | `input`的`placeholder`文案 | `String` | | | -| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 | -| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | | +| placeholder | `input`的`placeholder`文案 | `String` | - | - | +| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 | +| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - | ### Event diff --git a/docs/examples-docs/zh-CN/sku.md b/docs/examples-docs/zh-CN/sku.md index 00743a56b..80d642f94 100644 --- a/docs/examples-docs/zh-CN/sku.md +++ b/docs/examples-docs/zh-CN/sku.md @@ -140,7 +140,7 @@ Vue.component(Sku.name, Sku); ### slots sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表： -| 名称 | 说明 | +| Name | 说明 | |-----------|-----------| | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 | | sku-group | 商品sku展示区 | diff --git a/docs/examples-docs/zh-CN/stepper.md b/docs/examples-docs/zh-CN/stepper.md index b6f1543c8..b49d01341 100644 --- a/docs/examples-docs/zh-CN/stepper.md +++ b/docs/examples-docs/zh-CN/stepper.md @@ -3,10 +3,6 @@ .van-stepper { margin-left: 15px; } - - .curr-stepper { - margin: 15px; - } } @@ -36,8 +32,17 @@ Vue.component(Stepper.name, Stepper); :::demo 基础用法 ```html - -

当前值：{{ stepper1 }}

+ +``` + +```javascript +export default { + data() { + return { + value: 1 + } + } +} ``` ::: @@ -46,7 +51,7 @@ Vue.component(Stepper.name, Stepper); :::demo 禁用状态 ```html - + ``` ::: @@ -56,8 +61,7 @@ Vue.component(Stepper.name, Stepper); :::demo 高级用法 ```html - -

当前值：{{ stepper2 || 9 }}

+ ``` ::: diff --git a/docs/examples-docs/zh-CN/steps.md b/docs/examples-docs/zh-CN/steps.md index b3339ca0a..7a9f64120 100644 --- a/docs/examples-docs/zh-CN/steps.md +++ b/docs/examples-docs/zh-CN/steps.md @@ -145,17 +145,17 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| active | 当前步骤，起始值为0 | `Number` | | | -| icon | 当前步骤的icon | `String` | | | -| iconClass | 当前步骤栏为icon添加的类 | `String` | | | -| title | 当前步骤从标题 | `String` | | | -| description | 当前步骤描述 | `String` | | | +| active | 当前步骤，起始值为0 | `Number` | - | - | +| icon | 当前步骤的icon | `String` | - | - | +| iconClass | 当前步骤栏为icon添加的类 | `String` | - | - | +| title | 当前步骤标题 | `String` | - | - | +| description | 当前步骤描述 | `String` | - | - | | direction | 显示方向 | `String` | `horizontal` | `vertical` | -| activeColor | active状态颜色 | `String` | `#06bf04` | | +| activeColor | active状态颜色 | `String` | `#06bf04` | - | ### Steps Slot -| 名称 | 说明 | +| Name | 说明 | |-----------|-----------| | icon | 自定义icon区域 | | message-extra | 状态栏添加额外的元素 | diff --git a/docs/examples-docs/zh-CN/submit-bar.md b/docs/examples-docs/zh-CN/submit-bar.md index 476333123..6d0617f22 100644 --- a/docs/examples-docs/zh-CN/submit-bar.md +++ b/docs/examples-docs/zh-CN/submit-bar.md @@ -95,10 +95,10 @@ Vue.component(SubmitBar.name, SubmitBar); | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| price | 价格（单位分） | `Number` | | 是 | -| button-text | 按钮文字 | `String` | | 是 | +| price | 价格（单位分） | `Number` | - | 是 | +| button-text | 按钮文字 | `String` | - | 是 | | button-type | 按钮类型 | `String` | `danger` | 否 | -| tip | 提示文案 | `String` | | 否 | +| tip | 提示文案 | `String` | - | 否 | | disabled | 是否禁用按钮 | `Boolean` | `false` | 否 | | loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 | @@ -110,6 +110,6 @@ Vue.component(SubmitBar.name, SubmitBar); ### Slot -| 名称 | 说明 | +| Name | 说明 | |-----------|-----------| | tip | 提示文案中的额外操作和说明 | diff --git a/docs/examples-docs/zh-CN/switch-cell.md b/docs/examples-docs/zh-CN/switch-cell.md index 27b9bb232..3474e56c7 100644 --- a/docs/examples-docs/zh-CN/switch-cell.md +++ b/docs/examples-docs/zh-CN/switch-cell.md @@ -67,10 +67,10 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| v-model | 开关状态 | `Boolean` | | | -| title | 左侧标题 | `String` | `''` | | -| loading | 是否为加载状态 | `Boolean` | `false` | | -| disabled | 是否为禁用状态 | `Boolean` | `false` | | +| v-model | 开关状态 | `Boolean` | - | - | +| title | 左侧标题 | `String` | `''` | - | +| loading | 是否为加载状态 | `Boolean` | `false` | - | +| disabled | 是否为禁用状态 | `Boolean` | `false` | - | ### Event diff --git a/docs/examples-docs/zh-CN/tab.md b/docs/examples-docs/zh-CN/tab.md index 2f9c0c119..3b12027d7 100644 --- a/docs/examples-docs/zh-CN/tab.md +++ b/docs/examples-docs/zh-CN/tab.md @@ -234,17 +234,17 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选 | |-----------|-----------|-----------|-------------|-------------| | classtype | 两种UI | `String` | `line` | `line`, `card` | -| active | 默认激活的tab | `String`, `Number` | `0` | | -| navclass | tabs的内部nav上的自定义classname | `String` | | | -| duration | 切换tab的动画时间 | `Number` | `0.3` | | | +| active | 默认激活的tab | `String`, `Number` | `0` | - | +| navclass | tabs的内部nav上的自定义classname | `String` | - | - | +| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - | ### van-tab API | 参数 | 说明 | 类型 | 默认值 | 可选 | |-----------|-----------|-----------|-------------|-------------| -| title | tab的标题 | `String` | | | -| disabled | 是否禁用这个tab | `Boolean` | `false` | | +| title | tab的标题 | `String` | - | - | +| disabled | 是否禁用这个tab | `Boolean` | `false` | - | ### van-tabs Event diff --git a/docs/examples-docs/zh-CN/tag.md b/docs/examples-docs/zh-CN/tag.md index 946a140dd..11c3479e5 100644 --- a/docs/examples-docs/zh-CN/tag.md +++ b/docs/examples-docs/zh-CN/tag.md @@ -63,8 +63,8 @@ Vue.component(Tag.name, Tag); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | type | 类型 | `String` | `''`| `primary` `success` `danger` | -| plain | 是否为空心样式 | `Boolean` | `false` | | -| mark | 是否为标记样式 | `Boolean` | `false` | | +| plain | 是否为空心样式 | `Boolean` | `false` | - | +| mark | 是否为标记样式 | `Boolean` | `false` | - | ### Slot diff --git a/docs/examples-docs/zh-CN/tree-select.md b/docs/examples-docs/zh-CN/tree-select.md index 5343df65f..3fe95add7 100644 --- a/docs/examples-docs/zh-CN/tree-select.md +++ b/docs/examples-docs/zh-CN/tree-select.md @@ -128,9 +128,9 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | | -| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | | -| activeId | 右侧选择项，高亮的数据id | Number | 0 | | +| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | - | +| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | - | +| activeId | 右侧选择项，高亮的数据id | Number | 0 | - | #### 事件 | 事件名 | 说明 | 参数 | diff --git a/docs/examples-docs/zh-CN/waterfall.md b/docs/examples-docs/zh-CN/waterfall.md index c94cb11b6..2f8afcadf 100644 --- a/docs/examples-docs/zh-CN/waterfall.md +++ b/docs/examples-docs/zh-CN/waterfall.md @@ -4,8 +4,6 @@ #### 全局注册 -`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装： - ```js import Vue from 'vue'; import { Waterfall } from 'vant'; @@ -36,37 +34,25 @@ import { Waterfall } from 'packages'; export default { data() { return { - list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], - loading: false, - finished: false + list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + disabled: false }; }, + directives: { - WaterfallLower: Waterfall('lower'), - WaterfallUpper: Waterfall('upper') + WaterfallLower: Waterfall('lower') }, + methods: { loadMore() { - if (this.list.length >= 50) { - this.finished = true; - return; - } - - this.loading = true; + this.disabled = true; setTimeout(() => { - let lastNumber = this.list[this.list.length - 1]; for (let i = 0; i < 5; i ++) { - lastNumber += 1; - this.list.push(lastNumber); + this.list.push(this.list.length); } - this.loading = false; + this.disabled = false; }, 200); } - }, - computed: { - isWaterfallDisabled() { - return this.loading || this.finished; - } } }; @@ -103,19 +89,46 @@ export default {

当即将滚动到元素底部时，会自动加载更多

    -
  • {{ item }}
    • +
  • {{ item }}
``` + +```js +export default { + data() { + return { + list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + disabled: false + }; + }, + + directives: { + WaterfallLower: Waterfall('lower') + }, + + methods: { + loadMore() { + this.disabled = true; + setTimeout(() => { + for (let i = 0; i < 5; i ++) { + this.list.push(this.list.length); + } + this.disabled = false; + }, 200); + } + } +}; +``` ::: ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | | -| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | | -| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | | -| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | | +| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - | +| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - | +| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - | +| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |