feat: menu组件增加popup

src/packages/menu/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo full">
+  <div class="demo full menu-demo">
     <h2>基础用法</h2>
     <nut-menu>
       <nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
@@ -46,6 +46,13 @@
       ></nut-menu-item>
     </nut-menu>
 
+    <h2>禁止蒙层展示</h2>
+    <p class="tips">属性`hasMask`控制是否有蒙层，默认为 `true`展示蒙层 </p>
+    <nut-menu :hasMask="false">
+      <nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
+      <nut-menu-item :menuList="menuList" :title="title"></nut-menu-item>
+    </nut-menu>
+
     <h2>点击事件</h2>
     <p class="tips"
       >标题点击事件`menu-click`，菜单列表选择点击事件`on-change`</p
@@ -136,8 +143,7 @@ export default createDemo({
   color: #909ca4;
   margin-top: -10px;
   margin-bottom: 10px;
-}
-.nut-menu {
+  padding: 0 22px;
 }
 .base-style.nut-menu-item {
   .nut-menu-panel {
@@ -148,4 +154,7 @@ export default createDemo({
 .user-style {
   padding: 20px;
 }
+#app .demo.menu-demo {
+  padding-bottom: 200px;
+}
 </style>

src/packages/menu/doc.md

@@ -67,6 +67,19 @@ app.use(Menu);
     <nut-menu-item :menuList="menuList2" title="筛选" disabled ></nut-menu-item>
 </nut-menu>
 ```
+
+### 禁止蒙层展示
+属性`hasMask`控制是否有蒙层，默认为 `true`展示蒙层 
+
+```html
+<nut-menu :hasMask="false">
+    <nut-menu-item :menuList="menuList" title="最新商品">
+    </nut-menu-item>
+    <nut-menu-item :menuList="menuList" :title="title">
+    </nut-menu-item>
+</nut-menu>
+```
+
 ### 点击事件
 
 `Menu` 的 `@menu-click` 事件返回点击的菜单标题，`@on-change`事件返回菜单列表选中的数据。
@@ -133,6 +146,7 @@ const alertText = (info, type) => {
 | disabled | 是否开启禁用设置，默认不开启    | Boolean | false |
 | maxHeight | 菜单列表最大高度，单位px    | String, Number | - |
 | autoClose | 选择后下拉菜单列表是否自动收起，默认自动收起   | Boolean | true |
+|hasMask| 是否有蒙层 | Boolean | true|
 
 ### Events
 

src/packages/menu/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <view class="nut-menu">
+  <view class="nut-menu" :style="showMask && `z-index:9999`">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { toRefs } from 'vue';
+import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useChildren } from '@/utils/useRelation/useChildren';
 export const MENU_KEY = 'nutMenu';
@@ -16,16 +16,27 @@ export default create({
       //单选 simple  多选  multiple，暂留
       type: String,
       default: 'simple'
+    },
+    hasMask: {
+      type: Boolean,
+      default: true
     }
   },
   components: {},
 
   setup(props, { emit }) {
-    // const { autoClose } = toRefs(props);
-    // const handleClick = (event: Event) => {
-    //   emit('click', event);
-    // };
-    // return { autoClose };
+    const state = reactive({
+      showMask: false
+    });
+    const handleMaskShow = status => {
+      state.showMask = status;
+    };
+    const { linkChildren } = useChildren(MENU_KEY);
+    linkChildren({
+      handleMaskShow,
+      hasMask: props.hasMask
+    });
+    return { ...toRefs(state) };
   }
 });
 </script>

src/packages/menuitem/index.vue

@@ -1,12 +1,15 @@
 <template>
   <view
+    id="menuId"
     class="nut-menu-item"
     :class="[{ disabled: disabled }, { 'nut-menu-active': showPanel }]"
   >
+    <nut-popup v-model:show="showMask"></nut-popup>
     <view class="nut-menu-title" @click="handleMenuPanel">
       <view class="title-name" v-html="menuTitle"></view>
       <i class="icon"></i>
     </view>
+
     <view
       class="nut-menu-panel"
       ref="menuPanel"
@@ -90,9 +93,11 @@ export default create({
     const { menuList, multiStyle } = toRefs(props);
     const menuTitle = ref(props.title);
     const menu = useParent(MENU_KEY);
+    const parent: any = reactive(menu.parent as any);
     const state = reactive({
       showPanel: false,
-      currMenu: 0
+      currMenu: 0,
+      showMask: false
     });
 
     const handleMenuPanel = () => {
@@ -101,7 +106,12 @@ export default create({
       if (props.disabled) {
         return;
       }
+
       state.showPanel = !state.showPanel;
+      if (parent.hasMask) {
+        state.showMask = !state.showMask;
+        parent.handleMaskShow(state.showPanel);
+      }
     };
     //menu列表浮层展示和隐藏
     const handleShowAndHide = (event: any) => {
@@ -109,6 +119,8 @@ export default create({
       if (menuBox && state.showPanel) {
         if (!menuBox.contains(event.target)) {
           state.showPanel = false;
+          state.showMask = false;
+          parent.handleMaskShow(false);
         }
       }
     };
@@ -117,6 +129,8 @@ export default create({
       state.currMenu = index;
       if (props.autoClose) {
         state.showPanel = false;
+        state.showMask = false;
+        parent.handleMaskShow(false);
       }
       emit('on-change', item, menuTitle.value);
     };
@@ -138,6 +152,7 @@ export default create({
     });
     return {
       ...toRefs(state),
+      ...toRefs(parent),
       handleMenuPanel,
       checkMenus,
       menuTitle,