fix: 🐛 修复ActionSheet等组件在H5端隐藏导航栏或在tabbar页面高度计算错误的问题

Moonofweisheng · Sep 7, 2023 · 39201cb · 39201cb
1 parent 237c03c
commit 39201cb
Show file tree

Hide file tree

Showing 13 changed files with 144 additions and 129 deletions.
diff --git a/src/components/page-wraper/page-wraper.vue b/src/components/page-wraper/page-wraper.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-08-07 18:49:03
- * @LastEditTime: 2023-09-02 21:58:56
+ * @LastEditTime: 2023-09-07 14:09:13
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\src\components\page-wraper\page-wraper.vue
@@ -49,9 +49,6 @@ const theme = computed(() => {
 
 onMounted(() => {
   setNotifyDefaultOptions({
-    // #ifdef H5
-    safeHeight: 44,
-    // #endif
     onClick: (event) => console.log('onClick', event),
     onClosed: () => console.log('onClosed'),
     onOpened: () => console.log('onOpened')

diff --git a/src/pages/notify/Index.vue b/src/pages/notify/Index.vue
@@ -25,20 +25,19 @@
         <wd-cell title="使用 Notify 组件" is-link @click="showNotifyComponent" />
       </wd-cell-group>
     </demo-block>
-    <wd-notify type="success" :safe-height="safeHeight" v-model:visible="visible">
+    <wd-notify type="success" v-model:visible="visible">
       <wd-icon name="check-outline" size="inherit" color="inherit" />
       成功通知
     </wd-notify>
   </page-wraper>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import type { NotifyType } from '@/uni_modules/wot-design-uni/components/wd-notify/type'
 import { useNotify } from '@/uni_modules/wot-design-uni'
 
 let timer: ReturnType<typeof setTimeout>
 const visible = ref(false)
-const safeHeight = ref(0)
 const { showNotify } = useNotify('notify')
 
 const showType = (type: NotifyType) => {
@@ -74,10 +73,4 @@ const showNotifyComponent = () => {
     visible.value = false
   }, 2000)
 }
-
-onMounted(() => {
-  // #ifdef H5
-  safeHeight.value = 44
-  // #endif
-})
 </script>
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
@@ -18,7 +18,11 @@
     >
       <view
         class="wd-action-sheet"
-        :style="`${(actions && actions.length) || (panels && panels.length) ? 'margin: 0 10px 10px; border-radius: 16px;' : ''}`"
+        :style="`${
+          (actions && actions.length) || (panels && panels.length)
+            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
+            : 'margin-bottom: var(--window-bottom)'
+        }`"
       >
         <view v-if="title" :class="`wd-action-sheet__header ${customHeaderClass}`">
           {{ title }}

diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss
@@ -53,6 +53,10 @@
     border-radius: 16px 16px 0px 0px;
   }
 
+  @include e(body) {
+    padding-bottom: var(--window-bottom);
+  }
+
   @include when(border) {
     .wd-picker__field {
       @include halfPixelBorder("top", $-cell-padding);

diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
@@ -40,83 +40,85 @@
       @close="onCancel"
       custom-class="wd-picker__popup"
     >
-      <!--toolBar-->
-      <view class="wd-picker__toolbar" @touchmove="noop">
-        <!--取消按钮-->
-        <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
-          {{ cancelButtonText }}
+      <view class="wd-picker__body">
+        <!--toolBar-->
+        <view class="wd-picker__toolbar" @touchmove="noop">
+          <!--取消按钮-->
+          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+            {{ cancelButtonText }}
+          </view>
+          <!--标题-->
+          <view v-if="title" class="wd-picker__title">{{ JSON.stringify(title) }}</view>
+          <!--确定按钮-->
+          <view :class="`wd-picker__action ${loading || isLoading ? 'is-loading' : ''}`" @click="onConfirm">
+            {{ confirmButtonText }}
+          </view>
         </view>
-        <!--标题-->
-        <view v-if="title" class="wd-picker__title">{{ JSON.stringify(title) }}</view>
-        <!--确定按钮-->
-        <view :class="`wd-picker__action ${loading || isLoading ? 'is-loading' : ''}`" @click="onConfirm">
-          {{ confirmButtonText }}
+        <!-- 区域选择tab展示 -->
+        <view v-if="region" class="wd-picker__region-tabs">
+          <view :class="`wd-picker__region ${showStart ? 'is-active' : ''} `" @click="tabChange">
+            <view>开始时间</view>
+            <view class="wd-picker__region-time">{{ showTabLabel[0] }}</view>
+          </view>
+          <view :class="`wd-picker__region ${showStart ? '' : 'is-active'}`" @click="tabChange">
+            <view>结束时间</view>
+            <view class="wd-picker__region-time">{{ showTabLabel[1] }}</view>
+          </view>
         </view>
-      </view>
-      <!-- 区域选择tab展示 -->
-      <view v-if="region" class="wd-picker__region-tabs">
-        <view :class="`wd-picker__region ${showStart ? 'is-active' : ''} `" @click="tabChange">
-          <view>开始时间</view>
-          <view class="wd-picker__region-time">{{ showTabLabel[0] }}</view>
+        <!--datetimePickerView-->
+        <view :class="showStart ? 'wd-picker__show' : 'wd-picker__hidden'">
+          <wd-datetime-picker-view
+            :custom-class="customViewClass"
+            ref="datetimePickerView"
+            :type="type"
+            v-model="innerValue"
+            :loading="loading || isLoading"
+            :loading-color="loadingColor"
+            :columns-height="columnsHeight"
+            :value-key="valueKey"
+            :label-key="labelKey"
+            :formatter="formatter"
+            :filter="filter"
+            :column-formatter="getType(modelValue) === 'array' ? customColumnFormatter : undefined"
+            :max-hour="maxHour"
+            :min-hour="minHour"
+            :max-date="maxDate"
+            :min-date="minDate"
+            :max-minute="maxMinute"
+            :min-minute="minMinute"
+            :start-symbol="true"
+            @change="onChangeStart"
+            @pickstart="onPickStart"
+            @pickend="onPickEnd"
+          />
         </view>
-        <view :class="`wd-picker__region ${showStart ? '' : 'is-active'}`" @click="tabChange">
-          <view>结束时间</view>
-          <view class="wd-picker__region-time">{{ showTabLabel[1] }}</view>
+        <view :class="showStart ? 'wd-picker__hidden' : 'wd-picker__show'">
+          <wd-datetime-picker-view
+            :custom-class="customViewClass"
+            ref="datetimePickerView1"
+            :type="type"
+            v-model="endInnerValue"
+            :loading="loading || isLoading"
+            :loading-color="loadingColor"
+            :columns-height="columnsHeight"
+            :value-key="valueKey"
+            :label-key="labelKey"
+            :formatter="formatter"
+            :filter="filter"
+            :column-formatter="getType(modelValue) === 'array' ? customColumnFormatter : undefined"
+            :max-hour="maxHour"
+            :min-hour="minHour"
+            :max-date="maxDate"
+            :min-date="minDate"
+            :max-minute="maxMinute"
+            :min-minute="minMinute"
+            :start-symbol="false"
+            @change="onChangeEnd"
+            @pickstart="onPickStart"
+            @pickend="onPickEnd"
+          />
         </view>
       </view>
-      <!--datetimePickerView-->
-      <view :class="showStart ? 'wd-picker__show' : 'wd-picker__hidden'">
-        <wd-datetime-picker-view
-          :custom-class="customViewClass"
-          ref="datetimePickerView"
-          :type="type"
-          v-model="innerValue"
-          :loading="loading || isLoading"
-          :loading-color="loadingColor"
-          :columns-height="columnsHeight"
-          :value-key="valueKey"
-          :label-key="labelKey"
-          :formatter="formatter"
-          :filter="filter"
-          :column-formatter="getType(modelValue) === 'array' ? customColumnFormatter : undefined"
-          :max-hour="maxHour"
-          :min-hour="minHour"
-          :max-date="maxDate"
-          :min-date="minDate"
-          :max-minute="maxMinute"
-          :min-minute="minMinute"
-          :start-symbol="true"
-          @change="onChangeStart"
-          @pickstart="onPickStart"
-          @pickend="onPickEnd"
-        />
-      </view>
-      <view :class="showStart ? 'wd-picker__hidden' : 'wd-picker__show'">
-        <wd-datetime-picker-view
-          :custom-class="customViewClass"
-          ref="datetimePickerView1"
-          :type="type"
-          v-model="endInnerValue"
-          :loading="loading || isLoading"
-          :loading-color="loadingColor"
-          :columns-height="columnsHeight"
-          :value-key="valueKey"
-          :label-key="labelKey"
-          :formatter="formatter"
-          :filter="filter"
-          :column-formatter="getType(modelValue) === 'array' ? customColumnFormatter : undefined"
-          :max-hour="maxHour"
-          :min-hour="minHour"
-          :max-date="maxDate"
-          :min-date="minDate"
-          :max-minute="maxMinute"
-          :min-minute="minMinute"
-          :start-symbol="false"
-          @change="onChangeEnd"
-          @pickstart="onPickStart"
-          @pickend="onPickEnd"
-        />
-      </view>
     </wd-popup>
   </view>
 </template>

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
@@ -10,10 +10,10 @@
       :modal="modal"
       :close-on-click-modal="closeOnClickModal"
       @clickmodal="close"
-      @beforeenter="handleOpen"
-      @afterenter="handleOpened"
-      @beforeleave="handleClose"
-      @afterleave="onPopupClose"
+      @before-enter="handleOpen"
+      @after-enter="handleOpened"
+      @before-leave="handleClose"
+      @after-leave="onPopupClose"
     >
       <view v-if="options.length">
         <view
@@ -53,6 +53,7 @@ export default {
 import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { debounce } from '../common/util'
+import type { PopupType } from '../wd-popup/type'
 
 interface Props {
   customClass?: string
@@ -86,7 +87,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const showWrapper = ref<boolean>(false)
 const showPop = ref<boolean>(false)
-const position = ref<string>('')
+const position = ref<PopupType>()
 const transName = ref<string>('')
 const zIndex = ref<number>(12)
 const displayTitle = ref<string>('')
@@ -192,7 +193,10 @@ function close() {
 const positionStyle = computed(() => {
   let style: string = ''
   if (showPop.value) {
-    style = parent.direction === 'down' ? `top: ${parent.$.exposed.offset.value}px; bottom: 0;` : `top: 0; bottom: ${parent.$.exposed.offset.value}px`
+    style =
+      parent.direction === 'down'
+        ? `top: calc(var(--window-top) + ${parent.$.exposed.offset.value}px); bottom: 0;`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${parent.$.exposed.offset.value}px)`
   } else {
     style = ''
   }

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
@@ -129,11 +129,6 @@ function fold(child?: any) {
 
     if (props.direction === 'down') {
       offset.value = bottom
-      // #ifdef H5
-      // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
-      // H5的导航栏高度为44px
-      offset.value = bottom + 44
-      // #endif
     } else {
       offset.value = windowHeight.value - top
     }

diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/index.ts b/src/uni_modules/wot-design-uni/components/wd-notify/index.ts
@@ -1,4 +1,3 @@
-import type { InjectionKey } from 'vue'
 import { provide, reactive } from 'vue'
 import type { NotifyProps } from './type'
 import { deepMerge, isString } from '../common/util'

diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue b/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue
@@ -40,9 +40,18 @@ const state = inject<NotifyProps>(getNotifyOptionKey(props.selector), props)
 
 const customStyle = computed(() => {
   const { safeHeight, position } = state
-
-  if (!isDef(safeHeight) || position !== 'top') return ''
-  return `top: ${addUnit(safeHeight)}`
+  let customStyle: string = ''
+  switch (position) {
+    case 'top':
+      customStyle = `top: calc(var(--window-top) + ${addUnit(safeHeight || 0)})`
+      break
+    case 'bottom':
+      customStyle = 'bottom: var(--window-bottom)'
+      break
+    default:
+      break
+  }
+  return customStyle
 })
 
 const onClick = (event: MouseEvent) => {

diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/index.scss b/src/uni_modules/wot-design-uni/components/wd-picker/index.scss
@@ -162,6 +162,10 @@
     line-height: 1.25;
   }
 
+  @include e(body) {
+    padding-bottom: var(--window-bottom);
+  }
+
   @include e(toolbar) {
     position: relative;
     display: flex;

diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
@@ -33,35 +33,37 @@
       @close="onCancel"
       custom-class="wd-picker__popup"
     >
-      <!--toolBar-->
-      <view class="wd-picker__toolbar" @touchmove="noop">
-        <!--取消按钮-->
-        <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
-          {{ cancelButtonText }}
-        </view>
-        <!--标题-->
-        <view v-if="title" class="wd-picker__title">{{ title }}</view>
-        <!--确定按钮-->
-        <view :class="`wd-picker__action ${isLoading ? 'is-loading' : ''}`" @click="onConfirm">
-          {{ confirmButtonText }}
+      <view class="wd-picker__body">
+        <!--toolBar-->
+        <view class="wd-picker__toolbar" @touchmove="noop">
+          <!--取消按钮-->
+          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+            {{ cancelButtonText }}
+          </view>
+          <!--标题-->
+          <view v-if="title" class="wd-picker__title">{{ title }}</view>
+          <!--确定按钮-->
+          <view :class="`wd-picker__action ${isLoading ? 'is-loading' : ''}`" @click="onConfirm">
+            {{ confirmButtonText }}
+          </view>
         </view>
+        <!--pickerView-->
+        <wd-picker-view
+          ref="pickerViewWd"
+          :custom-class="customViewClass"
+          v-model="pickerValue"
+          :columns="displayColumns"
+          :loading="isLoading"
+          :loading-color="loadingColor"
+          :columns-height="columnsHeight"
+          :value-key="valueKey"
+          :label-key="labelKey"
+          @change="pickerViewChange"
+          @pickstart="onPickStart"
+          @pickend="onPickEnd"
+          :column-change="columnChange"
+        />
       </view>
-      <!--pickerView-->
-      <wd-picker-view
-        ref="pickerViewWd"
-        :custom-class="customViewClass"
-        v-model="pickerValue"
-        :columns="displayColumns"
-        :loading="isLoading"
-        :loading-color="loadingColor"
-        :columns-height="columnsHeight"
-        :value-key="valueKey"
-        :label-key="labelKey"
-        @change="pickerViewChange"
-        @pickstart="onPickStart"
-        @pickend="onPickEnd"
-        :column-change="columnChange"
-      />
     </wd-popup>
   </view>
 </template>

diff --git a/src/uni_modules/wot-design-uni/components/wd-popup/type.ts b/src/uni_modules/wot-design-uni/components/wd-popup/type.ts
@@ -0,0 +1 @@
+export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type PopupType = 'center' \| 'top' \| 'right' \| 'bottom' \| 'left'