[Improvement] DatetimePicker: support all picker props (#788)

This commit is contained in:
neverland 2018-03-27 17:34:07 +08:00 committed by GitHub
parent 5497eef5ef
commit 99361427f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 15 deletions

View File

@ -99,12 +99,17 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | Picker type | `String` | `datetime` | `date` `time` `year-month` | | type | Picker type | `String` | `datetime` | `date` `time` <br> `year-month` |
| min-date | Min date | `Date` | Ten years ago on January 1 | - | | min-date | Min date | `Date` | Ten years ago on January 1 | - |
| max-date | Max date | `Date` | Ten years later on December 31 | - | | max-date | Max date | `Date` | Ten years later on December 31 | - |
| min-hour | Min hour | `Number` | `0` | - | | min-hour | Min hour | `Number` | `0` | - |
| max-hour | Max hour | `Number` | `23` | - | | max-hour | Max hour | `Number` | `23` | - |
| visible-item-count | Count of columns to show | `Number` | `5` | - | | title | Toolbar title | `String` | `''` | - |
| loading | Whether to show loading prompt | `Boolean` | `false` | - |
| item-height | Option height | `Number` | `44` | - |
| confirm-button-text | Text of confirm button | `String` | `Confirm` | - |
| cancel-button-text | Text of cancel button | `String` | `Cancel` | - |
| visible-item-count | Count of visible columns | `Number` | `5` | - |
### Event ### Event

View File

@ -132,11 +132,11 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
| show-toolbar | Whether to show toolbar | `Boolean` | `false` | - | | show-toolbar | Whether to show toolbar | `Boolean` | `false` | - |
| title | Toolbar title | `String` | `''` | - | | title | Toolbar title | `String` | `''` | - |
| loading | Whether to show loading prompt | `Boolean` | `false` | - | | loading | Whether to show loading prompt | `Boolean` | `false` | - |
| value-key | Key of option text | `String` | `text` | - |
| item-height | Option height | `Number` | `44` | - |
| confirm-button-text | Text of confirm button | `String` | `Confirm` | - | | confirm-button-text | Text of confirm button | `String` | `Confirm` | - |
| cancel-button-text | Text of cancel button | `String` | `Cancel` | - | | cancel-button-text | Text of cancel button | `String` | `Cancel` | - |
| item-height | Option height | `Number` | `44` | - |
| visible-item-count | Count of visible columns | `Number` | `5` | - | | visible-item-count | Count of visible columns | `Number` | `5` | - |
| value-key | Key of option text | `String` | `text` | - |
### Event ### Event
Picker events will pass different parameters according to the columns are single or multiple Picker events will pass different parameters according to the columns are single or multiple

View File

@ -104,7 +104,12 @@ export default {
| max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - | | max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
| min-hour | 可选的最小小时,针对 time 类型 | `Number` | `0` | - | | min-hour | 可选的最小小时,针对 time 类型 | `Number` | `0` | - |
| max-hour | 可选的最大小时,针对 time 类型 | `Number` | `23` | - | | max-hour | 可选的最大小时,针对 time 类型 | `Number` | `23` | - |
| visible-item-count | 每一列可见备选元素的个数 | `Number` | `5` | - | | title | 顶部栏标题 | `String` | `''` | - |
| loading | 是否显示加载状态 | `Boolean` | `false` | - |
| item-height | 选项高度 | `Number` | `44` | - |
| confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
| cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
### Event ### Event

View File

@ -134,11 +134,11 @@ export default {
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - | | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
| title | 顶部栏标题 | `String` | `''` | - | | title | 顶部栏标题 | `String` | `''` | - |
| loading | 是否显示加载状态 | `Boolean` | `false` | - | | loading | 是否显示加载状态 | `Boolean` | `false` | - |
| value-key | 选项对象中,文字对应的 key | `String` | `text` | - |
| item-height | 选项高度 | `Number` | `44` | - |
| confirm-button-text | 确认按钮文字 | `String` | `确认` | - | | confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
| cancel-button-text | 取消按钮文字 | `String` | `取消` | - | | cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
| item-height | 选项高度 | `Number` | `44` | - |
| visible-item-count | 可见的选项个数 | `Number` | `5` | - | | visible-item-count | 可见的选项个数 | `Number` | `5` | - |
| value-key | 选项对象中,文字对应的 key | `String` | `text` | - |
### Event ### Event
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数 Picker 组件的事件会根据 columns 是单列或多列返回不同的参数

View File

@ -1,9 +1,13 @@
<template> <template>
<picker <picker
ref="picker" ref="picker"
:show-toolbar="showToolbar" :title="title"
:columns="columns" :columns="columns"
:visible-item-count="visibleItemCount" :item-height="itemHeight"
:show-toolbar="showToolbar"
:visibie-item-height="visibleItemCount"
:confirm-button-text="confirmButtonText"
:cancel-button-text="cancelButtonText"
@change="onChange" @change="onChange"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="$emit('cancel')" @cancel="$emit('cancel')"
@ -25,6 +29,12 @@ export default create({
}, },
props: { props: {
value: {},
title: String,
itemHeight: Number,
visibleItemCount: Number,
confirmButtonText: String,
cancelButtonText: String,
type: { type: {
type: String, type: String,
default: 'datetime' default: 'datetime'
@ -37,10 +47,6 @@ export default create({
type: String, type: String,
default: 'YYYY.MM.DD HH时 mm分' default: 'YYYY.MM.DD HH时 mm分'
}, },
visibleItemCount: {
type: Number,
default: 5
},
minDate: { minDate: {
type: Date, type: Date,
default: () => new Date(currentYear - 10, 0, 1), default: () => new Date(currentYear - 10, 0, 1),
@ -58,8 +64,7 @@ export default create({
maxHour: { maxHour: {
type: Number, type: Number,
default: 23 default: 23
}, }
value: {}
}, },
data() { data() {