sard-uniapp 1.14.2 → 1.14.3

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.14.3](https://github.com/sutras/sard-uniapp/compare/v1.14.2...v1.14.3) (2025-05-14)
+
+
+### Bug Fixes
+
+* 修复dropdown弹出框问题 ([5eeaf2e](https://github.com/sutras/sard-uniapp/commit/5eeaf2edf2a9a02978848fbbd68fc91a00901618))
+
+
+
 ## [1.14.2](https://github.com/sutras/sard-uniapp/compare/v1.14.1...v1.14.2) (2025-05-14)
 
 

package/components/dropdown-item/dropdown-item.vue

@@ -32,20 +32,17 @@
     @touchmove.stop.prevent
   />
   <view v-if="wholeVisible" :class="bem.e('popover')" :style="popupInset">
-    <sar-popup
-      :root-class="bem.e('popup')"
-      :root-style="
-        stringifyStyle({
-          position: 'absolute',
-        })
-      "
-      :overlay-style="stringifyStyle({ position: 'absolute' })"
-      :overlay-class="bem.e('overlay')"
-      :effect="popupEffect"
+    <sar-overlay
+      root-style="position: absolute"
       :visible="popupVisible"
       :duration="context.duration"
-      @after-leave="onAfterLeave"
-      @overlay-click="onOverlayClick"
+      :z-index="zIndex"
+      @click="onOverlayClick"
+    />
+    <view
+      :class="popupClass"
+      :style="popupStyle"
+      @transitionend="onTransitionEnd"
     >
       <slot>
         <sar-list inlaid>
@@ -70,7 +67,7 @@
           </sar-list-item>
         </sar-list>
       </slot>
-    </sar-popup>
+    </view>
   </view>
 </template>
 
@@ -83,7 +80,9 @@ import {
   watch,
   inject,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  reactive,
+  toRef
 } from "vue";
 import {
   classNames,
@@ -94,20 +93,21 @@ import {
   getWindowInfo,
   isNullish
 } from "../../utils";
-import SarPopup from "../popup/popup.vue";
 import SarList from "../list/list.vue";
 import SarListItem from "../list-item/list-item.vue";
 import SarIcon from "../icon/icon.vue";
+import SarOverlay from "../overlay/overlay.vue";
 import {
   dropdownContextSymbol,
   defaultDropdownItemProps
 } from "../dropdown/common";
+import { useTransition, useZIndex } from "../../use";
 export default  _defineComponent({
   components: {
-    SarPopup,
     SarList,
     SarListItem,
     SarIcon,
+    SarOverlay,
   },
   ...{
     options: {
@@ -241,6 +241,36 @@ export default  _defineComponent({
         visible: wholeVisible
       });
     });
+    const [zIndex, increaseZIndex] = useZIndex();
+    const { realVisible, transitionClass, onTransitionEnd } = useTransition(
+      reactive({
+        visible: toRef(() => popupVisible.value),
+        duration: toRef(() => context.duration),
+        prefix: computed(() => bem.em("popup", popupEffect.value) + "-"),
+        onVisibleHook: (name) => {
+          if (name === "before-enter") {
+            increaseZIndex();
+          }
+          if (name === "after-leave") {
+            onAfterLeave();
+          }
+        }
+      })
+    );
+    const popupClass = computed(() => {
+      return classNames(
+        bem.e("popup"),
+        bem.em("popup", popupEffect.value),
+        transitionClass.value
+      );
+    });
+    const popupStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        zIndex: zIndex.value,
+        display: realVisible.value ? "flex" : "none",
+        transitionDuration: context.duration + "ms"
+      });
+    });
     onUnmounted(() => {
       context.unregister(instance);
     });
@@ -266,13 +296,11 @@ export default  _defineComponent({
     const dropdownItemStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, context, itemId, instance, innerValue, innerVisible, wholeVisible, popupVisible, popupInset, awayInset, setPosition, setInnerVisible, onItemClick, onOptionClick, onOverlayClick, onAwayClick, onAfterLeave, hide, currentLabel, currentArrow, popupEffect, dropdownItemClass, dropdownItemStyle, get classNames() {
+    const __returned__ = { props, emit, bem, context, itemId, instance, innerValue, innerVisible, wholeVisible, popupVisible, popupInset, awayInset, setPosition, setInnerVisible, onItemClick, onOptionClick, onOverlayClick, onAwayClick, onAfterLeave, hide, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, popupClass, popupStyle, currentLabel, currentArrow, popupEffect, dropdownItemClass, dropdownItemStyle, get classNames() {
       return classNames;
-    }, get stringifyStyle() {
-      return stringifyStyle;
     }, get isNullish() {
       return isNullish;
-    }, SarPopup, SarList, SarListItem, SarIcon };
+    }, SarList, SarListItem, SarIcon, SarOverlay };
     return __returned__;
   }
 });

package/components/dropdown-item/index.scss

@@ -45,6 +45,49 @@
     touch-action: none;
   }
 
+  @include e(popup) {
+    @include universal;
+    position: absolute;
+    width: 100%;
+
+    @include m(slide-top) {
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
+
+    @include m(slide-bottom) {
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+
+    @include m(slide-top-enter-from, slide-top-leave-to) {
+      transform: translate3d(0, -100%, 0);
+    }
+
+    @include m(slide-bottom-enter-from, slide-bottom-leave-to) {
+      transform: translate3d(0, 100%, 0);
+    }
+
+    @include m(
+      slide-top-enter-to,
+      slide-bottom-enter-to,
+      slide-top-leave-from,
+      slide-bottom-leave-from
+    ) {
+      transform: translate3d(0, 0, 0);
+    }
+
+    @include m(slide-top-enter-active, slide-bottom-enter-active) {
+      transition: transform var(--sar-popup-duration) ease-out;
+    }
+
+    @include m(slide-top-leave-active, slide-bottom-leave-active) {
+      transition: transform var(--sar-popup-duration) ease-in;
+    }
+  }
+
   @include e(option) {
     @include m(active) {
       color: var(--sar-dropdown-option-active-color);

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {