Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/menu/demo.vue

@@ -2,28 +2,28 @@
   <div class="demo full menu-demo">
     <h2>基础用法</h2>
     <nut-menu>
-      <nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
-      <nut-menu-item :menuList="menuList" :title="title"></nut-menu-item>
+      <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
+      <nut-menu-item :menu-list="menuList" :title="title"></nut-menu-item>
     </nut-menu>
 
     <h2>多列展示</h2>
     <nut-menu>
       <nut-menu-item
         class="base-style"
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="单列展示"
-        multiStyle="1"
-        maxHeight="200"
+        multi-style="1"
+        max-height="200"
       ></nut-menu-item>
       <nut-menu-item
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="双列展示"
-        multiStyle="2"
+        multi-style="2"
       ></nut-menu-item>
       <nut-menu-item
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="三列展示"
-        multiStyle="3"
+        multi-style="3"
       ></nut-menu-item>
     </nut-menu>
 
@@ -33,14 +33,14 @@
       属性控制下拉菜单列表是否选择后自动收起，默认自动收起。</p
     >
     <nut-menu>
-      <nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
+      <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
       <nut-menu-item
-        :menuList="menuList"
+        :menu-list="menuList"
         title="禁止自动收起"
-        :autoClose="false"
+        :auto-close="false"
       ></nut-menu-item>
       <nut-menu-item
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="筛选"
         disabled
       ></nut-menu-item>
@@ -48,9 +48,9 @@
 
     <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 :has-mask="false">
+      <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
+      <nut-menu-item :menu-list="menuList" :title="title"></nut-menu-item>
     </nut-menu>
 
     <h2>点击事件</h2>
@@ -59,14 +59,14 @@
     >
     <nut-menu>
       <nut-menu-item
-        :menuList="menuList"
+        :menu-list="menuList"
         title="选择菜单列表项"
-        multiStyle="2"
+        multi-style="2"
         @menu-click="alertText($event, 'title')"
         @on-change="getChecked"
       ></nut-menu-item>
       <nut-menu-item
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="选中标题触发"
         disabled
         @menu-click="alertText"

src/packages/menu/doc.md

@@ -23,8 +23,8 @@ app.use(Menu);
 
 ```html
 <nut-menu>
-  <nut-menu-item :menuList="menuList" title="最新商品" ></nut-menu-item>
-  <nut-menu-item :menuList="menuList" :title="title" ></nut-menu-item>
+  <nut-menu-item :menu-list="menuList" title="最新商品" ></nut-menu-item>
+  <nut-menu-item :menu-list="menuList" :title="title" ></nut-menu-item>
 </nut-menu>
 ```
 ```js
@@ -49,9 +49,9 @@ app.use(Menu);
 
 ```html
 <nut-menu>
-    <nut-menu-item :menuList="menuList2" title="单列展示" multiStyle="1" maxHeight="200"></nut-menu-item>
-    <nut-menu-item :menuList="menuList2" title="双列展示"  multiStyle="2"></nut-menu-item>
-    <nut-menu-item :menuList="menuList2" title="三列展示"  multiStyle="3"></nut-menu-item>
+    <nut-menu-item :menu-list="menuList2" title="单列展示" multi-style="1" maxHeight="200"></nut-menu-item>
+    <nut-menu-item :menu-list="menuList2" title="双列展示"  multi-style="2"></nut-menu-item>
+    <nut-menu-item :menu-list="menuList2" title="三列展示"  multi-style="3"></nut-menu-item>
 </nut-menu>
 ```
 
@@ -62,9 +62,9 @@ app.use(Menu);
 
 ```html
 <nut-menu>
-    <nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>
-    <nut-menu-item :menuList="menuList" :title="title" :autoClose="false"></nut-menu-item>
-    <nut-menu-item :menuList="menuList2" title="筛选" disabled ></nut-menu-item>
+    <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
+    <nut-menu-item :menu-list="menuList" title="title" :auto-close="false"></nut-menu-item>
+    <nut-menu-item :menu-list="menuList2" title="筛选" disabled ></nut-menu-item>
 </nut-menu>
 ```
 
@@ -73,9 +73,9 @@ app.use(Menu);
 
 ```html
 <nut-menu :hasMask="false">
-    <nut-menu-item :menuList="menuList" title="最新商品">
+    <nut-menu-item :menu-list="menuList" title="最新商品">
     </nut-menu-item>
-    <nut-menu-item :menuList="menuList" :title="title">
+    <nut-menu-item :menu-list="menuList" :title="title">
     </nut-menu-item>
 </nut-menu>
 ```
@@ -87,14 +87,14 @@ app.use(Menu);
 ```html
 <nut-menu>
     <nut-menu-item
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="选择菜单列表项"
-        multiStyle="2"
+        multi-style="2"
         @menu-click="alertText($event, 'title')"
         @on-change="getChecked"
     ></nut-menu-item>
     <nut-menu-item
-        :menuList="menuList2"
+        :menu-list="menuList2"
         title="选中标题触发"
         disabled
         @menu-click="alertText"
@@ -141,12 +141,12 @@ const alertText = (info, type) => {
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | title         | 菜单标题名称或可为菜单列表第一项，必填     | String | -                |
-| menuList        | 菜单列表数据，必填                     | Array | -                |
-| multiStyle        | 列表列数设置，默认1列，可选值 `1` `2` `3` | String, Number | 1                |
+| menu-list        | 菜单列表数据，必填                     | Array | -                |
+| multi-style        | 列表列数设置，默认1列，可选值 `1` `2` `3` | String, Number | 1                |
 | disabled | 是否开启禁用设置，默认不开启    | Boolean | false |
-| maxHeight | 菜单列表最大高度，单位px    | String, Number | - |
-| autoClose | 选择后下拉菜单列表是否自动收起，默认自动收起   | Boolean | true |
-|hasMask| 是否有蒙层 | Boolean | true|
+| max-height | 菜单列表最大高度，单位px    | String, Number | - |
+| auto-close | 选择后下拉菜单列表是否自动收起，默认自动收起   | Boolean | true |
+|has-mask| 是否有蒙层 | Boolean | true|
 
 ### Events
 

src/packages/menu/index.scss

@@ -1,5 +1,5 @@
 .nut-menu {
-  background: #fff;
+  background: $white;
   display: flex;
   align-items: center;
   position: relative;

src/packages/menu/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <view class="nut-menu" :style="showMask && `z-index:9999`">
+  <view :class="classes" :style="showMask && `z-index:9999`">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { toRefs, reactive, provide } from 'vue';
+import { toRefs, reactive, provide, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('menu');
 import menuitem from '@/packages/menuitem/index.vue';
@@ -25,14 +25,20 @@ export default create({
     const state = reactive({
       showMask: false
     });
-    const handleMaskShow = status => {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const handleMaskShow = (status: boolean) => {
       state.showMask = status;
     };
     provide('menuRelation', {
       handleMaskShow,
       hasMask: props.hasMask
     });
-    return { ...toRefs(state) };
+    return { ...toRefs(state), classes };
   }
 });
 </script>

src/packages/menuitem/index.scss

@@ -8,7 +8,7 @@
   &.disabled {
     color: #999;
   }
-  &.nut-menu-active {
+  &.nut-menu-item-active {
     .nut-menu-title {
       font-weight: bold;
       .icon {

src/packages/menuitem/index.vue

@@ -1,20 +1,12 @@
 <template>
-  <view
-    id="menuId"
-    class="nut-menu-item"
-    :class="[{ disabled: disabled }, { 'nut-menu-active': showPanel }]"
-  >
+  <view :class="classes">
     <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>
+      <nut-icon class-prefix="icon"></nut-icon>
     </view>
 
-    <view
-      class="nut-menu-panel"
-      ref="menuPanel"
-      :style="`max-height:${maxHeight}px`"
-    >
+    <view class="nut-menu-panel" :style="`max-height:${maxHeight}px`">
       <view
         v-if="menuList && menuList.length"
         class="menu-list"
@@ -25,18 +17,19 @@
       >
         <view
           class="menu-option"
-          :class="{ checked: currMenu == index }"
+          :class="{ checked: currMenu === index }"
           v-for="(item, index) in menuList"
           :key="index"
           @click="checkMenus(item, index)"
-          ><nut-icon
+        >
+          <nut-icon
             class="check-icon"
-            v-if="currMenu == index"
+            v-if="currMenu === index"
             name="Check"
             size="14px"
           ></nut-icon
-          >{{ item.value }}</view
-        >
+          >{{ item.value }}
+        </view>
       </view>
       <slot></slot>
     </view>
@@ -48,15 +41,13 @@ import {
   toRefs,
   onMounted,
   ref,
-  nextTick,
   computed,
   watch,
   onUnmounted,
-  provide,
   inject
 } from 'vue';
 import { createComponent } from '@/utils/create';
-const { create } = createComponent('menu-item');
+const { create, componentName } = createComponent('menu-item');
 export default create({
   props: {
     title: {
@@ -79,7 +70,7 @@ export default create({
     },
     multiStyle: {
       type: [String, Number],
-      default: 1 //可选值1、2、3
+      default: 1
     },
     maxHeight: {
       type: [String, Number],
@@ -88,7 +79,6 @@ export default create({
   },
   emits: ['on-change', 'menu-click'],
   setup(props, { emit }) {
-    const { menuList, multiStyle } = toRefs(props);
     const menuTitle = ref(props.title);
     const menu = inject('menuRelation');
     const parent: any = reactive(menu as any);
@@ -98,6 +88,15 @@ export default create({
       showMask: false
     });
 
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        disabled: props.disabled,
+        [`${prefixCls}-active`]: state.showPanel
+      };
+    });
+
     const handleMenuPanel = () => {
       emit('menu-click', menuTitle.value);
       //禁用
@@ -111,7 +110,7 @@ export default create({
         parent.handleMaskShow(state.showPanel);
       }
     };
-    //menu列表浮层展示和隐藏
+
     const handleShowAndHide = (event: any) => {
       const menuBox = document.querySelectorAll('.nut-menu-active')[0];
       if (menuBox && state.showPanel) {
@@ -149,12 +148,11 @@ export default create({
         false;
     });
     return {
+      classes,
       ...toRefs(state),
-      ...toRefs(parent),
       handleMenuPanel,
       checkMenus,
-      menuTitle,
-      multiStyle
+      menuTitle
     };
   }
 });