Browse Source

fix: 修复 menu 收起无动画效果

Ymm0008 2 years ago
parent
commit
700f13e1b0

+ 2 - 2
src/packages/__VUE/menuitem/index.scss

@@ -39,8 +39,8 @@
 }
 
 .nut-menu__pop {
-  transition: all 0 ease 0;
-  transform: none;
+  transition: height linear 3s;
+  // transform: none;
 }
 
 .nut-menu-item-placeholder-element {

+ 29 - 5
src/packages/__VUE/menuitem/index.taro.vue

@@ -10,7 +10,15 @@
     </div>
     <nut-popup
       :style="
-        parent.props.direction === 'down' ? { top: parent.offset.value + 'px' } : { bottom: parent.offset.value + 'px' }
+        parent.props.direction === 'down'
+          ? {
+              top: parent.offset.value + 'px',
+              height: state.showPopup ? contentHeight : 0
+            }
+          : {
+              bottom: parent.offset.value + 'px',
+              height: state.showPopup ? contentHeight : 0
+            }
       "
       :overlay-style="
         parent.props.direction === 'down'
@@ -29,7 +37,7 @@
       @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
-      <Nut-Scroll-View :scroll-y="true" style="height: 100%">
+      <Nut-Scroll-View :scroll-y="true">
         <view class="nut-menu-item__content">
           <view
             v-for="(option, index) in options"
@@ -67,13 +75,14 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, PropType, inject, getCurrentInstance, computed, onUnmounted } from 'vue';
+import { reactive, PropType, inject, getCurrentInstance, computed, onUnmounted, ref, nextTick } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('menu-item');
 import Popup from '../popup/index.taro.vue';
 import NutScrollView from '../scrollView/index.taro.vue';
 import { MenuItemOption } from './type';
 import { Check } from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
 
 let _zIndex = 2000;
 
@@ -156,8 +165,22 @@ export default create({
         return { ...heightStyle, top: 'auto' };
       }
     });
-
+    const contentHeight = ref('auto');
     const toggle = (show = !state.showPopup, options: { immediate?: boolean } = {}) => {
+      if (show) {
+        nextTick(() => {
+          setTimeout(() => {
+            const query = Taro.createSelectorQuery();
+            query.selectAll('.nut-menu-item__content').boundingClientRect();
+            query.exec((res: any[]) => {
+              const data = res[0];
+              const _height = data.filter((item: { height: number }) => item.height > 0);
+              contentHeight.value = _height[0]['height'] + 'px';
+            });
+          }, 500);
+        });
+      }
+
       if (show === state.showPopup) {
         return;
       }
@@ -210,7 +233,8 @@ export default create({
       toggle,
       onClick,
       handleClose,
-      handleClickOutside
+      handleClickOutside,
+      contentHeight
     };
   }
 });

+ 0 - 2
src/sites/mobile-taro/vue/src/exhibition/pages/table/index.vue

@@ -31,11 +31,9 @@ import { reactive, toRefs, onMounted, onUnmounted, h, defineComponent } from 'vu
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { TableColumnProps } from '@/packages/__VUE/table/types';
-import { Button } from '@nutui/nutui-taro';
 import { Dongdong } from '@nutui/icons-vue-taro';
 export default defineComponent({
   components: {
-    Button,
     Dongdong,
     Header
   },