fix(dropdown-menu): 修复菜单栏和面板分离问题 (#2606)

* fix(dropdown-menu): 修复菜单栏和面板分离问题

* fix(dropdown-menu): 删除快照

* fix(dropdown-menu): 更新快照

* test: update snapshots

* feat(dropdown-menu): 收起状态允许触摸菜单栏滑动

---------

Co-authored-by: maureenwan <maureenwan@tencent.com>
Co-authored-by: anlyyao <anly_yaw@163.com>

src/dropdown-item/dropdown-item.less

@@ -114,4 +114,11 @@
       }
     }
   }
+
+  &_mask {
+    position: fixed;
+    width: 100vh;
+    top: 0;
+    left: 0;
+  }
 }

src/dropdown-item/dropdown-item.wxml

@@ -6,6 +6,13 @@
   class="{{classPrefix}} class {{prefix}}-class"
   style="{{_._style([this.getStyles(top, zIndex), style, customStyle])}}"
 >
+  <view
+    class="{{ classPrefix }}_mask"
+    hidden="{{!show}}"
+    style="{{_._style(['height:' + maskHeight + 'px', style, customStyle])}}"
+    bind:tap="handleMaskClick"
+    catchtouchmove="closeDropdown"
+  ></view>
   <t-popup
     visible="{{show}}"
     z-index="{{zIndex + 1}}"

src/dropdown-menu/__test__/__snapshots__/index.test.js.snap

@@ -9,6 +9,7 @@ exports[`dropdown-menu :base 1`] = `
       class="t-dropdown-menu class t-class"
       id="t-bar"
       style="font-size: 9px;"
+      catch:touchmove="noop"
     >
       <wx-view
         ariaDisabled="{{false}}"
@@ -84,6 +85,13 @@ exports[`dropdown-menu :base 1`] = `
           class="t-dropdown-item class t-class"
           style="z-index:11600;"
         >
+          <wx-view
+            class="t-dropdown-item_mask"
+            hidden="{{false}}"
+            style="height:0px;"
+            bind:tap="handleMaskClick"
+            catch:touchmove="closeDropdown"
+          />
           <t-popup
             tClass="t-dropdown-item__popup-host"
             tClassContent="t-dropdown-item__content t-class-content"

src/dropdown-menu/dropdown-menu.ts

@@ -108,5 +108,7 @@ export default class DropdownMenu extends SuperComponent {
 
       this.toggle(index);
     },
+
+    noop() {},
   };
 }

src/dropdown-menu/dropdown-menu.wxml

@@ -1,7 +1,12 @@
 <import src="../common/template/icon.wxml" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<view style="{{_._style([style, customStyle])}}" class="{{ classPrefix }} class {{prefix}}-class" id="t-bar">
+<view
+  style="{{_._style([style, customStyle])}}"
+  class="{{ classPrefix }} class {{prefix}}-class"
+  id="t-bar"
+  catchtouchmove="{{activeIdx === -1?'':'noop'}}"
+>
   <view
     wx:for="{{menus}}"
     wx:key="index"

src/tree-select/tree-select.less

@@ -46,5 +46,6 @@
 
   &-column {
     width: 100%;
+    height: auto;
   }
 }