fix(ui/picker,dialog): 修改成统一的单例模式增加close方法

affects: @varlet/ui
varletjs · Feb 3, 2021 · 095b346 · 095b346
1 parent 42ee8bf
commit 095b346
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -41,13 +41,17 @@ export default defineComponent({
     const log = (message: string) => console.log(message)
 
     const create = async () => {
-      const { state } = await Dialog({
+      Dialog({
         title: '测试',
         cancelButton: false,
         message: '测试文字测试文字测试文字测试文字测试文字测试文字测试文字',
       })
 
-      console.log(state)
+      setTimeout(() => {
+        Dialog.close()
+      }, 2000)
+
+      // console.log(state)
     }
 
     return {

diff --git a/packages/varlet-ui/src/dialog/index.ts b/packages/varlet-ui/src/dialog/index.ts
@@ -23,16 +23,25 @@ interface DialogOptions {
   closeOnClickOverlay?: boolean
 }
 
-type DialogResolvedState = 'confirm' | 'cancel' | 'close'
+type DialogResolvedState = 'confirm' | 'cancel' | 'close' | 'exist'
 interface DialogResolvedData {
   state: DialogResolvedState
 }
 
+let singletonOptions: DialogOptions | null
+
 function Dialog(options: DialogOptions | string): Promise<DialogResolvedData> {
   return new Promise((resolve) => {
+    if (singletonOptions) {
+      resolve({
+        state: 'exist',
+      })
+    }
     const dialogOptions: DialogOptions = isString(options) ? { message: options } : options
     const reactiveDialogOptions: DialogOptions = reactive(dialogOptions)
 
+    singletonOptions = reactiveDialogOptions
+
     const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
       onConfirm: () => {
         resolve({ state: 'confirm' })
@@ -45,9 +54,11 @@ function Dialog(options: DialogOptions | string): Promise<DialogResolvedData> {
       },
       onClosed: () => {
         unmountInstance()
+        singletonOptions = null
       },
       onRouteChange: () => {
         unmountInstance()
+        singletonOptions = null
       },
       'onUpdate:show': (value: boolean) => {
         reactiveDialogOptions.show = value
@@ -62,6 +73,10 @@ Dialog.install = function (app: App) {
   app.component(VarDialog.name, VarDialog)
 }
 
+Dialog.close = () => {
+  singletonOptions && (singletonOptions.show = false)
+}
+
 Dialog.Component = VarDialog
 
 export default Dialog
diff --git a/packages/varlet-ui/src/picker/index.ts b/packages/varlet-ui/src/picker/index.ts
@@ -1,4 +1,4 @@
-import { App, reactive, h } from 'vue'
+import { App, reactive } from 'vue'
 import VarPicker from './Picker.vue'
 import { NormalColumn, CascadeColumn } from './props'
 import { isArray } from '../utils/shared'
@@ -22,16 +22,23 @@ interface PickerOptions {
   onClosed?: () => void
 }
 
-type PickerResolvedState = 'confirm' | 'cancel' | 'close'
+type PickerResolvedState = 'confirm' | 'cancel' | 'close' | 'exist'
 
 interface PickerResolvedData {
   state: PickerResolvedState
   texts?: any[]
   indexes?: number[]
 }
 
+let singletonOptions: PickerOptions | null
+
 function Picker(options: PickerOptions | any[]): Promise<PickerResolvedData> {
   return new Promise((resolve) => {
+    if (singletonOptions) {
+      resolve({
+        state: 'exist',
+      })
+    }
     const pickerOptions: PickerOptions = isArray(options) ? { columns: options } : options
     const reactivePickerOptions: PickerOptions = reactive(pickerOptions)
     reactivePickerOptions.dynamic = true
@@ -60,10 +67,12 @@ function Picker(options: PickerOptions | any[]): Promise<PickerResolvedData> {
       },
       onRouteChange: () => {
         unmountInstance()
+        singletonOptions = null
       },
       onClosed: () => {
         reactivePickerOptions.onClosed?.()
         unmountInstance()
+        singletonOptions = null
       },
       'onUpdate:show': (value: boolean) => {
         reactivePickerOptions.show = value
@@ -80,4 +89,8 @@ Picker.install = function (app: App) {
   app.component(VarPicker.name, VarPicker)
 }
 
+Picker.close = () => {
+  singletonOptions && (singletonOptions.show = false)
+}
+
 export default Picker