Hanks10100 closed pull request #256: update doc for picker
URL: https://github.com/apache/incubator-weex-site/pull/256
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/docs/docs/modules/picker.md b/docs/docs/modules/picker.md
index c2d7a0187..ad0758bd1 100644
--- a/docs/docs/modules/picker.md
+++ b/docs/docs/modules/picker.md
@@ -66,74 +66,8 @@ pick time
- `result {string}`:result is one of success,cancel,error
- `data {string}`:the selected value，the form of data is HH:mm,it exists
when result is success.
-## Example
-
-```html
-<template>
- <div class="wrapper">
- <div class="group">
- <text class="label">Time: </text>
- <text class="title">{{value}}</text>
- </div>
- <div class="group">
- <text class="button" @click="pickTime">Pick Time</text>
- </div>
- </div>
-</template>
-
-<script>
- const picker = weex.requireModule('picker')
-
- export default {
- data () {
- return {
- value: ''
- }
- },
- methods: {
- pickTime () {
- picker.pickTime({
- value: this.value
- }, event => {
- if (event.result === 'success') {
- this.value = event.data
- }
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .wrapper {
- flex-direction: column;
- justify-content: center;
- }
- .group {
- flex-direction: row;
- justify-content: center;
- margin-bottom: 40px;
- align-items: center;
- }
- .label {
- font-size: 40px;
- color: #888888;
- }
- .title {
- font-size: 80px;
- color: #41B883;
- }
- .button {
- font-size: 36px;
- width: 280px;
- color: #41B883;
- text-align: center;
- padding-top: 25px;
- padding-bottom: 25px;
- border-width: 2px;
- border-style: solid;
- border-color: rgb(162, 217, 192);
- background-color: rgba(162, 217, 192, 0.2);
- }
-</style>
-```
+## DEMO
+
+[usage demo](http://dotwe.org/vue/060faedd0952f518d2d5322a5fb5ea2f)
+
+<IPhoneImg
imgSrc="https://img.alicdn.com/tfs/TB1idhbogHqK1RjSZJnXXbNLpXa-544-960.gif"; />
diff --git a/docs/zh/docs/modules/picker.md b/docs/zh/docs/modules/picker.md
index 601a01220..ea9f29fe4 100644
--- a/docs/zh/docs/modules/picker.md
+++ b/docs/zh/docs/modules/picker.md
@@ -2,54 +2,57 @@
以下为 picker 相关的 API，用于数据选择，日期选择，时间选择。（ H5模块如需使用，请手动引入
[weex-picker组件](https://github.com/weexteam/weex-picker)）。
## API
-### picker.pick(options, callback)
+
+### `picker.pick(options, callback)`
+
调用单选 picker
-options参数如下：
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- |
-| index | 默认选中的选项 | number |
-| items | picker 数据源 | array |
-| textColor | picker中文字的颜色 | color |
-| selectionColor | picker中选中item的背景色 | color |
-| confirmTitle | 确认按钮的文案 | string |
-| cancelTitle | 取消按钮的文案 | string |
-| confirmTitleColor | 确认按钮的文字颜色 | color |
-| cancelTitleColor | 取消按钮的文字颜色 | color |
-| title | 对话框的标题 | string |
-| titleColor | 对话框标题的文字颜色 | color |
-| titleBackgroundColor | 对话框标题的背景色 | color |
-
-`callback {function(ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback`
函数的参数，有两个属性：
-* `result {string}`：结果三种类型 `success`, `cancel`, `error`
-* `data {number}`：选择的选项,仅成功确认时候存在
-
-### picker.pickDate(options, callback)
-调用 date picker
-
-options参数如下：
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- |
-| value | 必选，date picker 选中的值，date 的字符串格式为 `yyyy-MM-dd` | string |
-| max | 可选，date 的最大值 | string |
-| min | 可选，date 的最小值 | string |
-
-`callback {function(ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback`
函数的参数，有两个属性：
-* `result {string}`：结果三种类型 `success`, `cancel`, `error`
-* `data {number}`：选择的值 date 的字符，格式为 yyyy-MM-dd, 仅成功确认的时候存在
+#### 参数说明
+
+- `options {Object}`
+ - `index {number}`: 默认选中的选项
+ - `items {array}`: picker 数据源
+ - `textColor {color}`: picker中文字的颜色
+ - `selectionColor {color}`: picker中选中item的背景色
+ - `confirmTitle {string}`: 确认按钮的文案
+ - `cancelTitle {string}`: 取消按钮的文案
+ - `confirmTitleColor {color}`: 确认按钮的文字颜色
+ - `cancelTitleColor {color}`: 取消按钮的文字颜色
+ - `title {string}`: 对话框的标题
+ - `titleColor {color}`: 对话框标题的文字颜色
+ - `titleBackgroundColor {color}`: 对话框标题的背景色
+- `callback {function (ret)}`: 执行完读取操作后的回调函数 `ret {Object}` 为 `callback`
'函数的参数，有两个属性
+ - `result {string}`: 结果三种类型 `success`, `cancel`, `error`
+ - `data {number}`: 选择的选项,仅成功确认时候存在
+
+### `picker.pickDate(options, callback)`
+
+调用 date picker
+
+#### 参数说明
+
+- `options {Object}`
+ - `value {string}`: 必选，date picker 选中的值，date 的字符串格式为 `yyyy-MM-dd`
+ - `max {string}`: 可选，date 的最大值
+ - `min {string}`: 可选，date 的最小值
+- `callback {function (ret)}`: 执行完读取操作后的回调函数。`ret {Object}` 为 `callback`
函数的参数，有两个属性:
+ - `result {string}`: 结果三种类型 `success`, `cancel`, `error`
+ - `data {string}`: 选择的值 date 的字符，格式为 yyyy-MM-dd, 仅成功确认的时候存在
### picker.pickTime(options, callback)
+
调用 time picker
-options参数如下：
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- |
-| value | 必选，time 格式为 `HH:mm` | string |
+#### 参数说明
-`callback {function(ret)}`：执行完读取操作后的回调函数。`ret {Object}` 为 `callback`
函数的参数，有两个属性：
-* `result {string}`：结果三种类型 `success`, `cancel`, `error`
-* `data {number}`：time 格式为 `HH:mm`, 仅成功确认的时候存在
+- `options {Object}`
+ - `value {string}`:必选，time 格式为 `HH:mm`
+- `callback {function (ret)}`:执行完读取操作后的回调函数。`ret {Object}` 为 `callback`
函数的参数，有两个属性
+ - `result {string}`: 结果三种类型 `success`, `cancel`, `error`
+ - `data {string}`:time 格式为 `HH:mm`, 仅成功确认的时候存在
## Demo
-[基本用法](http://dotwe.org/vue/060faedd0952f518d2d5322a5fb5ea2f)
+
+[用法示例](http://dotwe.org/vue/060faedd0952f518d2d5322a5fb5ea2f)
+
<IPhoneImg
imgSrc="https://img.alicdn.com/tfs/TB1idhbogHqK1RjSZJnXXbNLpXa-544-960.gif"; />
\ No newline at end of file
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
![https://img.alicdn.com/tfs/TB1idhbogHqK1RjSZJnXXbNLpXa-544-960.gif"](https://img.alicdn.com/tfs/TB1idhbogHqK1RjSZJnXXbNLpXa-544-960.gif"){kind=link}