From 1dc1feae40b8ca11df980aa1d5ecf108151938e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sun, 29 Dec 2019 08:58:11 +0800 Subject: [PATCH] feat(DatetimePicker): add getPicker method --- src/datetime-picker/DatePicker.js | 4 ++-- src/datetime-picker/README.md | 8 ++++++++ src/datetime-picker/README.zh-CN.md | 15 +++++---------- src/datetime-picker/TimePicker.js | 4 ++-- src/datetime-picker/shared.js | 5 +++++ types/datetime-picker.d.ts | 6 ++++++ types/index.d.ts | 3 ++- 7 files changed, 30 insertions(+), 15 deletions(-) create mode 100644 types/datetime-picker.d.ts diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js index f076e393c..55c33c69a 100644 --- a/src/datetime-picker/DatePicker.js +++ b/src/datetime-picker/DatePicker.js @@ -133,7 +133,7 @@ export default createComponent({ }, updateInnerValue() { - const indexes = this.$refs.picker.getIndexes(); + const indexes = this.getPicker().getIndexes(); const getValue = index => getTrueValue(this.originColumns[index].values[indexes[index]]); const year = getValue(0); @@ -194,7 +194,7 @@ export default createComponent({ } this.$nextTick(() => { - this.$refs.picker.setValues(values); + this.getPicker().setValues(values); }); } } diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index 3be485796..bfb428237 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -174,3 +174,11 @@ export default { | change | Triggered when value changed | picker: picker instance | | confirm | Triggered when click confirm button | value: current value | | cancel | Triggered when click cancel button | - | + +### Methods + +Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods + +| Name | Description | Attribute | Return value | +|------|------|------|------| +| getPicker | get Picker instance | - | - | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 6ea75bd0c..05cacb7b3 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -179,18 +179,13 @@ export default { | confirm | 点击完成按钮时触发的事件 | 当前 value | | cancel | 点击取消按钮时触发的事件 | - | -### change 事件 +### 方法 -在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： +通过 [ref](https://cn.vuejs.org/v2/api/#ref) 可以获取到 DatetimePicker 实例并调用实例方法 -| 函数 | 说明 | -|------|------| -| getColumnValue(index) | 获取对应列中选中的值 | -| setColumnValue(index, value) | 设置对应列中选中的值 | -| getColumnValues(index) | 获取对应列中所有的备选值 | -| setColumnValues(index, values) | 设置对应列中所有的备选值 | -| getValues() | 获取所有列中被选中的值，返回一个数组 | -| setValues(values) | `values`为一个数组，设置所有列中被选中的值 | +| 方法名 | 说明 | 参数 | 返回值 | +|------|------|------|------| +| getPicker | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - | ## 常见问题 diff --git a/src/datetime-picker/TimePicker.js b/src/datetime-picker/TimePicker.js index 8ebf5d202..4e235d88f 100644 --- a/src/datetime-picker/TimePicker.js +++ b/src/datetime-picker/TimePicker.js @@ -74,7 +74,7 @@ export default createComponent({ }, updateInnerValue() { - const [hourIndex, minuteIndex] = this.$refs.picker.getIndexes(); + const [hourIndex, minuteIndex] = this.getPicker().getIndexes(); const hour = this.originColumns[0].values[hourIndex] || this.originColumns[0].values[0]; const minute = this.originColumns[1].values[minuteIndex] || this.originColumns[1].values[0]; const value = `${hour}:${minute}`; @@ -98,7 +98,7 @@ export default createComponent({ const values = [formatter('hour', pair[0]), formatter('minute', pair[1])]; this.$nextTick(() => { - this.$refs.picker.setValues(values); + this.getPicker().setValues(values); }); } } diff --git a/src/datetime-picker/shared.js b/src/datetime-picker/shared.js index a247c11bb..aa685e225 100644 --- a/src/datetime-picker/shared.js +++ b/src/datetime-picker/shared.js @@ -67,6 +67,11 @@ export const TimePickerMixin = { }, methods: { + // @exposed-api + getPicker() { + return this.$refs.picker; + }, + onConfirm() { this.$emit('confirm', this.innerValue); }, diff --git a/types/datetime-picker.d.ts b/types/datetime-picker.d.ts new file mode 100644 index 000000000..d56047aec --- /dev/null +++ b/types/datetime-picker.d.ts @@ -0,0 +1,6 @@ +import { VanComponent } from './component'; +import { Picker } from './picker'; + +export class DatetimePicker extends VanComponent { + getPicker(): Picker; +} diff --git a/types/index.d.ts b/types/index.d.ts index 64c4c72ae..a41203d66 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -6,6 +6,7 @@ import { Area } from './area'; import { Checkbox } from './checkbox'; import { CheckboxGroup } from './checkbox-group'; import { CountDown } from './count-down'; +import { DatetimePicker } from './datetime-picker'; import { Dialog } from './dialog'; import { DropdownItem } from './dropdown-item'; import { Field } from './field'; @@ -40,7 +41,6 @@ export class ContactEdit extends VanComponent {} export class ContactList extends VanComponent {} export class CouponCell extends VanComponent {} export class CouponList extends VanComponent {} -export class DatetimePicker extends VanComponent {} export class Divider extends VanComponent {} export class DropdownMenu extends VanComponent {} export class Grid extends VanComponent {} @@ -93,6 +93,7 @@ export { Checkbox, CheckboxGroup, CountDown, + DatetimePicker, Dialog, DropdownItem, Field,