fix(menu): 修复文档中部分错误 & 修复 taro 小程序下闪跳问题 jd-opensource#1541 (jd-openso…

…urce#1678)
zhouLion · Sep 27, 2022 · eab94ea · eab94ea
1 parent 5c4e772
commit eab94ea
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/packages/__VUE/menu/doc.en-US.md b/src/packages/__VUE/menu/doc.en-US.md
@@ -267,7 +267,8 @@ export default {
 
 ```html
 <template>
-  <nut-menu>
+  <div class="blank"></div>
+  <nut-menu direction="up">
     <nut-menu-item v-model="state.value1" :options="state.options1" />
     <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
   </nut-menu>
@@ -304,6 +305,12 @@ export default {
   }
 }
 </script>
+<style>
+.blank {
+  width: 200px;
+  height: 200px;
+}
+</style>
 ```
 
 :::

diff --git a/src/packages/__VUE/menu/doc.md b/src/packages/__VUE/menu/doc.md
@@ -269,7 +269,8 @@ export default {
 
 ```html
 <template>
-  <nut-menu>
+  <div class="blank"></div>
+  <nut-menu direction="up">
     <nut-menu-item v-model="state.value1" :options="state.options1" />
     <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
   </nut-menu>
@@ -306,6 +307,12 @@ export default {
   }
 }
 </script>
+<style>
+.blank {
+  width: 200px;
+  height: 200px;
+}
+</style>
 ```
 
 :::

diff --git a/src/packages/__VUE/menu/index.taro.vue b/src/packages/__VUE/menu/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <view class="nut-menu__bar" :class="{ opened: opened }" ref="barRef">
+    <view class="nut-menu__bar" :class="{ opened: opened, 'offset-signal': offsetSignal }" ref="barRef">
       <template v-for="(item, index) in children" :key="index">
         <view
           class="nut-menu__item"
@@ -110,17 +110,24 @@ export default create({
       };
     });
 
-    const updateOffset = () => {
+    // updateOffset 操作的标识位
+    // 解决 taro 下初次展开菜单栏闪跳问题 #1541
+    const offsetSignal = ref(false);
+
+    const updateOffset = (item) => {
       if (barRef.value) {
+        offsetSignal.value = true;
         setTimeout(() => {
           Taro.createSelectorQuery()
-            .select('.nut-menu__bar.opened')
+            .select('.nut-menu__bar.offset-signal')
             .boundingClientRect((rect) => {
               if (props.direction === 'down') {
                 offset.value = rect.bottom;
               } else {
                 offset.value = Taro.getSystemInfoSync().windowHeight - rect.top;
               }
+              offsetSignal.value = false;
+              item.toggle();
             })
             .exec();
         }, 100);
@@ -132,8 +139,7 @@ export default create({
     const toggleItem = (active: number) => {
       children.forEach((item, index) => {
         if (index === active) {
-          updateOffset();
-          item.toggle();
+          updateOffset(item);
         } else if (item.state.showPopup) {
           item.toggle(false, { immediate: true });
         }
@@ -175,6 +181,7 @@ export default create({
       toggleItem,
       children,
       opened,
+      offsetSignal,
       classes,
       barRef,
       getClasses