feat(DatetimePicker): add getPicker method

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);
       });
     }
   }

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 | - | - |

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) | - | - |
 
 ## 常见问题
 

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);
       });
     }
   }

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);
     },

types/datetime-picker.d.ts

@@ -0,0 +1,6 @@
+import { VanComponent } from './component';
+import { Picker } from './picker';
+
+export class DatetimePicker extends VanComponent {
+  getPicker(): Picker;
+}

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,