fix(ui/picker,popup,dialog): picker命令式原型完成

affects: @varlet/ui
varletjs · Feb 3, 2021 · 6c12f71 · 6c12f71
1 parent 2ed6e8a
commit 6c12f71
Show file tree

Hide file tree

Showing 12 changed files with 457 additions and 209 deletions.
diff --git a/packages/varlet-ui/src/dialog/Dialog.vue b/packages/varlet-ui/src/dialog/Dialog.vue
@@ -1,54 +1,55 @@
 <template>
-	<var-popup
-		class="var-dialog__popup-radius"
-		v-model:show="popupShow"
-		:overlay="overlay"
-		:overlay-class="overlayClass"
-		:lock-scroll="lockScroll"
-		:close-on-click-overlay="popupCloseOnClickOverlay"
-		:teleport="teleport"
-		@open="$props.onOpen"
-		@close="$props.onClose"
-		@opened="$props.onOpened"
-		@closed="$props.onClosed"
-		@click-overlay="handleClickOverlay"
-	>
-		<div class="var--box var-dialog" v-bind="$attrs">
-			<div class="var-dialog__title">
-				<slot name="title">{{ title }}</slot>
-			</div>
-			<div
-				class="var-dialog__message"
-				:style="{
-					'text-align': messageAlign,
-				}"
-			>
-				<slot>
-					{{ message }}
-				</slot>
-			</div>
-			<div class="var-dialog__actions">
-				<var-button
-					class="var-dialog__button var-dialog__cancel-button"
-					:color="cancelButtonColor"
-					:background="cancelButtonBackground"
-					v-if="cancelButton"
-					@click="cancel"
-				>
-					{{ cancelButtonText }}
-				</var-button>
-				<var-button
-					class="var-dialog__button var-dialog__confirm-button"
-					:color="confirmButtonColor"
-					:background="confirmButtonBackground"
-					v-if="confirmButton"
-					@click="confirm"
-				>
-					{{ confirmButtonText }}
-				</var-button>
-			</div>
-		</div>
-	</var-popup>
+  <var-popup
+    class="var-dialog__popup-radius"
+    v-model:show="popupShow"
+    :overlay="overlay"
+    :overlay-class="overlayClass"
+    :lock-scroll="lockScroll"
+    :close-on-click-overlay="popupCloseOnClickOverlay"
+    :teleport="teleport"
+    @open="onOpen"
+    @close="onClose"
+    @closed="onClosed"
+    @opened="onOpened"
+    @route-change="onRouteChange"
+    @click-overlay="handleClickOverlay"
+  >
+    <div class="var--box var-dialog" v-bind="$attrs">
+      <div class="var-dialog__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div
+        class="var-dialog__message"
+        :style="{
+          'text-align': messageAlign,
+        }"
+      >
+        <slot>
+          {{ message }}
+        </slot>
+      </div>
+      <div class="var-dialog__actions">
+        <var-button
+          class="var-dialog__button var-dialog__cancel-button"
+          :color="cancelButtonColor"
+          :background="cancelButtonBackground"
+          v-if="cancelButton"
+          @click="cancel"
+        >
+          {{ cancelButtonText }}
+        </var-button>
+        <var-button
+          class="var-dialog__button var-dialog__confirm-button"
+          :color="confirmButtonColor"
+          :background="confirmButtonBackground"
+          v-if="confirmButton"
+          @click="confirm"
+        >
+          {{ confirmButtonText }}
+        </var-button>
+      </div>
+    </div>
+  </var-popup>
 </template>
 
 <script lang="ts">

diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -1,19 +1,19 @@
 <template>
   <app-type>声明式调用</app-type>
-  <var-dialog
-    v-model:show="show"
-    title="哈哈哈"
-    message="测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用"
-    @confirm="() => log('confirm')"
-    @cancel="() => log('cancel')"
-    @open="() => log('open')"
-    @close="() => log('close')"
-    @opened="() => log('opened')"
-    @closed="() => log('closed')"
-    @click-overlay="() => log('click-overlay')"
-  />
+  <!--  <var-dialog-->
+  <!--    v-model:show="show"-->
+  <!--    title="哈哈哈"-->
+  <!--    message="测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用"-->
+  <!--    @confirm="() => log('confirm')"-->
+  <!--    @cancel="() => log('cancel')"-->
+  <!--    @open="() => log('open')"-->
+  <!--    @close="() => log('close')"-->
+  <!--    @opened="() => log('opened')"-->
+  <!--    @closed="() => log('closed')"-->
+  <!--    @click-overlay="() => log('click-overlay')"-->
+  <!--  />-->
 
-  <var-button type="success" size="large" @click="show = true">开启</var-button>
+  <!--  <var-button type="success" size="large" @click="show = true">开启</var-button>-->
   <var-button type="success" size="large" @click="create">命令开启</var-button>
 </template>
 
@@ -26,7 +26,7 @@ export default defineComponent({
   name: 'DialogExample',
   components: {
     [Dialog.Component.name]: Dialog.Component,
-    [Button.name]: Button
+    [Button.name]: Button,
   },
   setup() {
     const show: Ref<boolean> = ref(false)
@@ -41,10 +41,10 @@ export default defineComponent({
     const log = (message: string) => console.log(message)
 
     const create = async () => {
-      const state = await Dialog({
+      const { state } = await Dialog({
         title: '测试',
         cancelButton: false,
-        message: '测试文字测试文字测试文字测试文字测试文字测试文字测试文字'
+        message: '测试文字测试文字测试文字测试文字测试文字测试文字测试文字',
       })
 
       console.log(state)
@@ -54,9 +54,9 @@ export default defineComponent({
       show,
       log,
       handleBeforeClose,
-      create
+      create,
     }
-  }
+  },
 })
 </script>
 

diff --git a/packages/varlet-ui/src/dialog/index.ts b/packages/varlet-ui/src/dialog/index.ts
@@ -4,45 +4,51 @@ import { isString } from '../utils/shared'
 import { mountInstance } from '../utils/components'
 
 interface DialogOptions {
-	show?: boolean
-	title?: string
-	message?: string
-	messageAlign?: string
-	confirmButton?: boolean
-	cancelButton?: boolean
-	confirmButtonText?: string
-	cancelButtonText?: string
-	confirmButtonColor?: string
-	cancelButtonColor?: string
-	confirmButtonBackground?: string
-	cancelButtonBackground?: string
-	beforeClose?: (done: () => void) => void
-	overlay?: boolean
-	overlayClass?: string
-	lockScroll?: boolean
-	closeOnClickOverlay?: boolean
+  show?: boolean
+  title?: string
+  message?: string
+  messageAlign?: string
+  confirmButton?: boolean
+  cancelButton?: boolean
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonColor?: string
+  cancelButtonColor?: string
+  confirmButtonBackground?: string
+  cancelButtonBackground?: string
+  beforeClose?: (done: () => void) => void
+  overlay?: boolean
+  overlayClass?: string
+  lockScroll?: boolean
+  closeOnClickOverlay?: boolean
 }
 
 type DialogResolvedState = 'confirm' | 'cancel' | 'close'
+interface DialogResolvedData {
+  state: DialogResolvedState
+}
 
-function Dialog(options: DialogOptions | string): Promise<DialogResolvedState> {
+function Dialog(options: DialogOptions | string): Promise<DialogResolvedData> {
   return new Promise((resolve) => {
     const dialogOptions: DialogOptions = isString(options) ? { message: options } : options
     const reactiveDialogOptions: DialogOptions = reactive(dialogOptions)
 
     const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
       onConfirm: () => {
-        resolve('confirm')
+        resolve({ state: 'confirm' })
       },
       onCancel: () => {
-        resolve('cancel')
+        resolve({ state: 'cancel' })
       },
       onClose: () => {
-        resolve('close')
+        resolve({ state: 'close' })
       },
       onClosed: () => {
         unmountInstance()
       },
+      onRouteChange: () => {
+        unmountInstance()
+      },
       'onUpdate:show': (value: boolean) => {
         reactiveDialogOptions.show = value
       },

diff --git a/packages/varlet-ui/src/dialog/props.ts b/packages/varlet-ui/src/dialog/props.ts
@@ -88,5 +88,6 @@ export const props = {
     'onOpened',
     'onClosed',
     'onClickOverlay',
+    'onRouteChange',
   ]),
 }