You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2018/12/21 02:15:36 UTC
[incubator-weex-site] branch draft updated: update doc for picker
(#256)
This is an automated email from the ASF dual-hosted git repository.
hanks pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/draft by this push:
new f61343f update doc for picker (#256)
f61343f is described below
commit f61343fa3e8c6f776c0c65bc1862c536d20e7ad5
Author: chen <lu...@users.noreply.github.com>
AuthorDate: Fri Dec 21 10:15:33 2018 +0800
update doc for picker (#256)
---
docs/docs/modules/picker.md | 76 +++----------------------------------
docs/zh/docs/modules/picker.md | 85 ++++++++++++++++++++++--------------------
2 files changed, 49 insertions(+), 112 deletions(-)
diff --git a/docs/docs/modules/picker.md b/docs/docs/modules/picker.md
index c2d7a01..ad0758b 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 601a012..ea9f29f 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