From 58be120b0318844563cf85ba6113333b54972d70 Mon Sep 17 00:00:00 2001 From: AmyFoxFN Date: Mon, 9 Apr 2018 18:03:23 +0800 Subject: [PATCH] docs(date-picker): update example --- document/components/docs/en-US/date-picker.md | 88 ++++++++++--------- document/components/docs/zh-CN/date-picker.md | 88 ++++++++++--------- 2 files changed, 92 insertions(+), 84 deletions(-) diff --git a/document/components/docs/en-US/date-picker.md b/document/components/docs/en-US/date-picker.md index 018ee5bb..aef65407 100644 --- a/document/components/docs/en-US/date-picker.md +++ b/document/components/docs/en-US/date-picker.md @@ -15,18 +15,19 @@ __Notice:__ Cause this component used create-api, so you should read [create-api ``` ```js export default { - mounted () { - this.datePicker = this.$createDatePicker({ - title: 'Date Picker', - min: new Date(2008, 7, 8), - max: new Date(2020, 9, 20), - value: new Date(), - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showDatePicker() { + if (!this.datePicker) { + this.datePicker = this.$createDatePicker({ + title: 'Date Picker', + min: new Date(2008, 7, 8), + max: new Date(2020, 9, 20), + value: new Date(), + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.datePicker.show() }, selectHandle(date, selectedVal, selectedText) { @@ -56,19 +57,20 @@ __Notice:__ Cause this component used create-api, so you should read [create-api ``` ```js export default { - mounted () { - this.timePicker = this.$createDatePicker({ - title: 'Time Picker', - min: new Date(2008, 7, 8, 8, 0, 0), - max: new Date(2008, 7, 8, 20, 59, 59), - value: new Date(2008, 7, 8, 12, 30, 30), - startColumn: 'hour', - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showTimePicker() { + if (!this.timePicker) { + this.timePicker = this.$createDatePicker({ + title: 'Time Picker', + min: [8, 0, 0], + max: [20, 59, 59], + value: new Date(), + startColumn: 'hour', + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.timePicker.show() }, selectHandle(date, selectedVal, selectedText) { @@ -98,19 +100,20 @@ __Notice:__ Cause this component used create-api, so you should read [create-api ``` ```js export default { - mounted () { - this.dateTimePicker = this.$createDatePicker({ - title: 'Date Time Picker', - min: new Date(2008, 7, 8, 8, 0, 0), - max: new Date(2020, 9, 20, 20, 59, 59), - value: new Date(), - columnCount: 6, - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showDateTimePicker() { + if (!this.dateTimePicker) { + this.dateTimePicker = this.$createDatePicker({ + title: 'Date Time Picker', + min: new Date(2008, 7, 8, 8, 0, 0), + max: new Date(2020, 9, 20, 20, 59, 59), + value: new Date(), + columnCount: 6, + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.dateTimePicker.show() }, selectHandle(date, selectedVal, selectedText) { @@ -140,18 +143,19 @@ __Notice:__ Cause this component used create-api, so you should read [create-api ``` ```js export default { - mounted () { - this.updatePropsPicker = this.$createDatePicker({ - title: 'Use $updateProps', - min: new Date(2008, 7, 8), - max: new Date(2020, 9, 20), - value: new Date(), - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showUpdatePropsPicker() { + if (!this.updatePropsPicker) { + this.updatePropsPicker = this.$createDatePicker({ + title: 'Use $updateProps', + min: new Date(2008, 7, 8), + max: new Date(2020, 9, 20), + value: new Date(), + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.updatePropsPicker.show() setTimeout(() => { this.updatePropsPicker.$updateProps({ diff --git a/document/components/docs/zh-CN/date-picker.md b/document/components/docs/zh-CN/date-picker.md index 9c512f40..cd7409fd 100644 --- a/document/components/docs/zh-CN/date-picker.md +++ b/document/components/docs/zh-CN/date-picker.md @@ -15,18 +15,19 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请 ``` ```js export default { - mounted () { - this.datePicker = this.$createDatePicker({ - title: 'Date Picker', - min: new Date(2008, 7, 8), - max: new Date(2020, 9, 20), - value: new Date(), - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showDatePicker() { + if (!this.datePicker) { + this.datePicker = this.$createDatePicker({ + title: 'Date Picker', + min: new Date(2008, 7, 8), + max: new Date(2020, 9, 20), + value: new Date(), + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.datePicker.show() }, selectHandle(date, selectedVal, selectedText) { @@ -56,19 +57,20 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请 ``` ```js export default { - mounted () { - this.timePicker = this.$createDatePicker({ - title: 'Time Picker', - min: new Date(2008, 7, 8, 8, 0, 0), - max: new Date(2008, 7, 8, 20, 59, 59), - value: new Date(2008, 7, 8, 12, 30, 30), - startColumn: 'hour', - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showTimePicker() { + if (!this.timePicker) { + this.timePicker = this.$createDatePicker({ + title: 'Time Picker', + min: [8, 0, 0], + max: [20, 59, 59], + value: new Date(), + startColumn: 'hour', + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.timePicker.show() }, selectHandle(date, selectedVal, selectedText) { @@ -98,19 +100,20 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请 ``` ```js export default { - mounted () { - this.dateTimePicker = this.$createDatePicker({ - title: 'Date Time Picker', - min: new Date(2008, 7, 8, 8, 0, 0), - max: new Date(2020, 9, 20, 20, 59, 59), - value: new Date(), - columnCount: 6, - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showDateTimePicker() { + if (!this.dateTimePicker) { + this.dateTimePicker = this.$createDatePicker({ + title: 'Date Time Picker', + min: new Date(2008, 7, 8, 8, 0, 0), + max: new Date(2020, 9, 20, 20, 59, 59), + value: new Date(), + columnCount: 6, + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.dateTimePicker.show() }, selectHandle(date, selectedVal, selectedText) { @@ -140,18 +143,19 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请 ``` ```js export default { - mounted () { - this.updatePropsPicker = this.$createDatePicker({ - title: 'Use $updateProps', - min: new Date(2008, 7, 8), - max: new Date(2020, 9, 20), - value: new Date(), - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { showUpdatePropsPicker() { + if (!this.updatePropsPicker) { + this.updatePropsPicker = this.$createDatePicker({ + title: 'Use $updateProps', + min: new Date(2008, 7, 8), + max: new Date(2020, 9, 20), + value: new Date(), + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.updatePropsPicker.show() setTimeout(() => { this.updatePropsPicker.$updateProps({ -- GitLab