feat: add menu (jd-opensource#731)

zhouLion · Oct 28, 2021 · 57834e6 · 57834e6
1 parent a466fd1
commit 57834e6
Show file tree

Hide file tree

Showing 11 changed files with 676 additions and 386 deletions.
diff --git a/src/config.json b/src/config.json
@@ -579,9 +579,10 @@
           "sort": 2,
           "cName": "菜单组件",
           "type": "component",
-          "show": false,
+          "taro":true,
+          "show": true,
           "desc": "下拉菜单组件",
-          "author": "vickyYE"
+          "author": "yangjinjun3"
         },
         {
           "version": "3.0.0",
@@ -593,7 +594,7 @@
           "exportEmpty": true,
           "show": false,
           "desc": "下拉菜单组件",
-          "author": "vickyYE"
+          "author": "yangjinjun3"
         },
         {
           "version": "3.0.0",

diff --git a/src/packages/__VUE/menu/demo.vue b/src/packages/__VUE/menu/demo.vue
@@ -1,84 +1,46 @@
 <template>
-  <div class="demo full menu-demo">
+  <div class="demo">
     <h2>基础用法</h2>
     <nut-menu>
-      <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
-      <nut-menu-item :menu-list="menuList" :title="title"></nut-menu-item>
+      <nut-menu-item title="全部商品" :options="options1"></nut-menu-item>
     </nut-menu>
-
-    <h2>多列展示</h2>
+    <h2>两列标题</h2>
     <nut-menu>
-      <nut-menu-item
-        class="base-style"
-        :menu-list="menuList2"
-        title="单列展示"
-        multi-style="1"
-        max-height="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-item title="全部商品" :options="options1"></nut-menu-item>
+      <nut-menu-item title="默认排序" :options="options2"></nut-menu-item>
     </nut-menu>
-
-    <h2>禁用操作</h2>
-    <p class="tips"
-      >`disabled` 属性可对菜单列表进行禁用操作。`autoClose`
-      属性控制下拉菜单列表是否选择后自动收起，默认自动收起。</p
-    >
-    <nut-menu>
-      <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>
-      <nut-menu-item
-        :menu-list="menuList"
-        title="禁止自动收起"
-        :auto-close="false"
-      ></nut-menu-item>
-      <nut-menu-item
-        :menu-list="menuList2"
-        title="筛选"
-        disabled
-      ></nut-menu-item>
+    <h2>获取选择的列表对象</h2>
+    <nut-menu @choose="handleChoose">
+      <nut-menu-item title="全部商品" :options="options1"></nut-menu-item>
     </nut-menu>
-
-    <h2>禁止蒙层展示</h2>
-    <p class="tips">属性`hasMask`控制是否有蒙层，默认为 `true`展示蒙层 </p>
-    <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>
+    <h2>一行两列列表对象</h2>
+    <nut-menu col="2">
+      <nut-menu-item title="全部商品" :options="options1"></nut-menu-item>
     </nut-menu>
-
-    <h2>点击事件</h2>
-    <p class="tips">标题点击事件`menu-click`，菜单列表选择点击事件`change`</p>
+    <h2>禁用菜单</h2>
     <nut-menu>
       <nut-menu-item
-        :menu-list="menuList"
-        title="选择菜单列表项"
-        multi-style="2"
-        @menu-click="alertText($event, 'title')"
-        @change="getChecked"
-      ></nut-menu-item>
-      <nut-menu-item
-        :menu-list="menuList2"
-        title="选中标题触发"
-        disabled
-        @menu-click="alertText"
+        title="全部商品"
+        disabled="true"
+        :options="options1"
       ></nut-menu-item>
     </nut-menu>
-
-    <h2>自定义内容</h2>
+    <h2>自定义选项的选中态图标颜色</h2>
+    <nut-menu active-color="#0f0">
+      <nut-menu-item title="全部商品" :options="options1"></nut-menu-item>
+    </nut-menu>
+    <h2>自定义菜单内容</h2>
     <nut-menu>
-      <nut-menu-item title="自定义选项">
-        <div class="user-style">
-          <nut-cell title="我是标题" desc="描述文字"> </nut-cell>
-          <nut-cell>
-            <nut-button size="large" type="primary">确认提交</nut-button>
-          </nut-cell>
+      <nut-menu-item title="筛选" ref="item">
+        <div
+          :style="{
+            display: 'flex',
+            'justify-content': 'space-between',
+            'align-items': 'center'
+          }"
+        >
+          <div :style="{ 'font-size': '12px' }">我是自定义内容</div>
+          <nut-button @click="handleClick">关闭</nut-button>
         </div>
       </nut-menu-item>
     </nut-menu>
@@ -92,67 +54,37 @@ const { createDemo } = createComponent('menu');
 export default createDemo({
   props: {},
   setup() {
-    // const title1 = ref('热门推荐');
-    const resData = reactive({
-      title: '热门推荐',
-      menuList: [
-        { value: '手机' },
-        { value: '电脑' },
-        { value: '家用电器' },
-        { value: '日用百货' }
-      ],
-      menuList2: [
-        { value: '热门推荐', id: 111 },
-        { value: '手机数码', id: 112 },
-        { value: '电脑办公', id: 113 },
-        { value: '美妆护肤', id: 114 },
-        { value: '个护清洁', id: 115 },
-        { value: '汽车生活', id: 116 },
-        { value: '京东超市', id: 117 },
-        { value: '母婴童装', id: 118 }
-      ]
-    });
+    const options1 = [
+      { text: '全部商品', value: 0 },
+      { text: '新款商品', value: 1 },
+      { text: '活动商品', value: 2 }
+    ];
+
+    const options2 = [
+      { text: '默认排序', value: 'a' },
+      { text: '好评排序', value: 'b' },
+      { text: '销量排序', value: 'c' }
+    ];
+
+    const item = ref<HTMLElement>();
 
-    const getChecked = (info: any, name: string) => {
-      alert('选择菜单选项：' + name);
-      console.log(11, info, name);
+    const handleChoose = (val, index) => {
+      console.log(val, index);
     };
-    const alertText = (info, type) => {
-      console.log(info, type);
-      if (type == 'title') {
-        alert('菜单标题点击：' + info);
-      } else {
-        alert('禁用操作');
-      }
+
+    const handleClick = () => {
+      item.value.toggle();
     };
 
     return {
-      ...toRefs(resData),
-      getChecked,
-      alertText
+      options1,
+      options2,
+      item,
+      handleChoose,
+      handleClick
     };
   }
 });
 </script>
 
-<style lang="scss" scoped>
-.tips {
-  font-size: 12px;
-  color: #909ca4;
-  margin-top: -10px;
-  margin-bottom: 10px;
-  padding: 0 22px;
-}
-.base-style.nut-menu-item {
-  .nut-menu-panel {
-    max-height: 300px !important;
-    overflow: auto;
-  }
-}
-.user-style {
-  padding: 20px;
-}
-#app .demo.menu-demo {
-  padding-bottom: 200px;
-}
-</style>
+<style lang="scss" scoped></style>