You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by zs...@apache.org on 2018/12/14 04:28:42 UTC
[incubator-weex-site] branch draft updated: Update picker.md
This is an automated email from the ASF dual-hosted git repository.
zshshr 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 7015b44 Update picker.md
7015b44 is described below
commit 7015b443c8964610db6e24469cb88de2c656b29f
Author: zshshr <zh...@gmail.com>
AuthorDate: Fri Dec 14 12:28:38 2018 +0800
Update picker.md
---
docs/docs/modules/picker.md | 188 ++++++++++++++++++++++++++++++++------------
1 file changed, 136 insertions(+), 52 deletions(-)
diff --git a/docs/docs/modules/picker.md b/docs/docs/modules/picker.md
index 601a012..c2d7a01 100644
--- a/docs/docs/modules/picker.md
+++ b/docs/docs/modules/picker.md
@@ -1,55 +1,139 @@
+---
+title: picker
+type: references
+group: Build-in Modules
+order: 9.08
+version: 2.1
+---
+
# picker
-以下为 picker 相关的 API，用于数据选择，日期选择，时间选择。（ H5模块如需使用，请手动引入 [weex-picker组件](https://github.com/weexteam/weex-picker)）。
+
+<span class="weex-version">v0.9+</span>
+
+## Summary
+
+A series of stream api. It provides function: pick data,pick date,pick time
## API
-### 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, 仅成功确认的时候存在
-
-### 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`, 仅成功确认的时候存在
-
-## Demo
-[基本用法](http://dotwe.org/vue/060faedd0952f518d2d5322a5fb5ea2f)
-<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1idhbogHqK1RjSZJnXXbNLpXa-544-960.gif" />
\ No newline at end of file
+### `pick(options, callback[options])`
+
+pick data(single column)
+
+#### Arguments
+
+- `options {Object}`:pick options
+ - `index {number}`:default selected row
+ - `items {array}`:picker's data
+ - `textColor {color}`：text color in the picker item
+ - `selectionColor {color}`：the background color of the selected item in the picker
+ - `confirmTitle {string}`：confirm button text
+ - `cancelTitle {string}`：cancel button text
+ - `confirmTitleColor {color}`：confirm button text color
+ - `cancelTitleColor {color}`：cancel button text color
+ - `title {string}`：title of dialog
+ - `titleColor {color}`：text color of the dialog title
+ - `titleBackgroundColor {color}`：background color of the dialog title
+
+- `callback {function (ret)}`:the callback function after executing this action.`ret {Object}` is `callback` 's parameter:
+ - `result {string}`:result is one of success,cancel,error
+ - `data {number}`:the selected index,it exists when result is success.
+
+### `pickDate(options, callback[options])`
+
+pick date
+
+#### Arguments
+
+- `options {Object}`:pick date options
+ - `value {string}`:Required，date picker selected value by default，date's form is yyyy-MM-dd
+ - `max {string}`:optional，date’s max value
+ - `min {string}`:optional，date's min value
+
+- `callback {function (ret)}`：the callback function after executing this action.ret {Object} is callback 's parameter:
+ - `result {string}`:result is one of success,cancel,error
+ - `data {string}`:the selected value，the form of data is yyyy-MM-dd ,it exists when result is success.
+
+### `pickTime(options, callback[options])`
+
+pick time
+
+#### Arguments
+
+- `options {Object}`:pick time options
+ - `value {string}`:required，the form of value is HH:mm
+
+- `callback {function (ret)}`:the callback function after executing this action.ret {Object} is callback 's parameter：
+ - `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>
+```