Menu 菜单请使用手机扫码体验

单选

  1. html
    <nut-menu
  2.     :isVisible="visible.isVisible1"
  3.     :list="list1"
  4.     type="simple"
  5.     @close="switchMenu('isVisible1',1)"
  6.     @choose="chooseMenu">
  7. </nut-menu>

多选style1(一、二、三)列

  1. html
    <nut-menu
  2.     :isVisible="visible.isVisible2"
  3.     :list="list2"
  4.     col="1"
  5.     type="multiple"
  6.     @close="switchMenu('isVisible2',2)"
  7.     @reset="reset"
  8.     @ok="ok"
  9.     @maxTip="maxTip">
  10. </nut-menu>
  11. <nut-menu
  12.     :isVisible="visible.isVisible3"
  13.     :list="list2"
  14.     col="2"
  15.     type="multiple"
  16.     @close="switchMenu('isVisible3',2)"
  17.     @reset="reset"
  18.     @ok="ok"
  19.     @maxTip="maxTip">
  20. </nut-menu>
  21. <nut-menu
  22.     :isVisible="visible.isVisible4"
  23.     :list="list2"
  24.     col="3"
  25.     type="multiple"
  26.     @close="switchMenu('isVisible4',2)"
  27.     @reset="reset"
  28.     @ok="ok"
  29.     @maxTip="maxTip">
  30. </nut-menu>

多选style2(一、二、三)列

  1. html
    <nut-menu
  2.     :isVisible="visible.isVisible5"
  3.     :list="list3"
  4.     mulstyle="style2"
  5.     type="multiple"
  6.     col="1"
  7.     @close="switchMenu('isVisible5',3)"
  8.     @reset="reset"
  9.     @ok="ok"
  10.     @maxTip="maxTip">
  11. </nut-menu>
  12. <nut-menu
  13.     :isVisible="visible.isVisible6"
  14.     :list="list3"
  15.     mulstyle="style2"
  16.     type="multiple"
  17.     col="2"
  18.     @close="switchMenu('isVisible6',3)"
  19.     @reset="reset"
  20.     @ok="ok"
  21.     @maxTip="maxTip">
  22. </nut-menu>
  23. <nut-menu
  24.     :isVisible="visible.isVisible7"
  25.     :list="list3"
  26.     mulstyle="style2"
  27.     type="multiple"
  28.     col="3"
  29.     @close="switchMenu('isVisible7',3)"
  30.     @reset="reset"
  31.     @ok="ok"
  32.     @maxTip="maxTip">
  33. </nut-menu>

多选style3(一、二、三)列,允许选择的最大数量为3个

  1. html
    <nut-menu
  2.     :isVisible="visible.isVisible8"
  3.     :list="list4"
  4.     type="multiple"
  5.     col="1"
  6.     mulstyle="style3"
  7.     max="3"
  8.     @close="switchMenu('isVisible8',4)"
  9.     @reset="reset"
  10.     @ok="ok"
  11.     @maxTip="maxTip">
  12. </nut-menu>
  13. <nut-menu
  14.     :isVisible="visible.isVisible9"
  15.     :list="list4"
  16.     type="multiple"
  17.     col="2"
  18.     mulstyle="style3"
  19.     max="3"
  20.     @close="switchMenu('isVisible9',4)"
  21.     @reset="reset"
  22.     @ok="ok"
  23.     @maxTip="maxTip">
  24. </nut-menu>
  25. <nut-menu
  26.     :isVisible="visible.isVisible10"
  27.     :list="list4"
  28.     type="multiple"
  29.     col="3"
  30.     mulstyle="style3"
  31.     max="3"
  32.     @close="switchMenu('isVisible10',4)"
  33.     @reset="reset"
  34.     @ok="ok"
  35.     @maxTip="maxTip">
  36. </nut-menu>

自定义菜单

  1. html
    <nut-menu
  2.     :isVisible="visible.isVisible11"
  3.     @close="switchMenu('isVisible11',5)">
  4.     <div slot="custom" class="custom-wrap"><span>自定义</span></div>
  5. </nut-menu>
  1. javascript
    import nutMenu from './menu.vue';
  2. export default {
  3.   components: {
  4.     [nutMenu.name]:nutMenu
  5.   },
  6.   data() {
  7.     return {
  8.       num:1,
  9.       titlenum:1,
  10.       max:6,
  11.       visible:{
  12.           isVisible1:false,
  13.           isVisible2:false,
  14.           isVisible3:false,
  15.           isVisible4:false,
  16.           isVisible5:false,
  17.           isVisible6:false,
  18.           isVisible7:false,
  19.           isVisible8:false,
  20.           isVisible9:false,
  21.           isVisible10:false,
  22.           isVisible11:false
  23.       },
  24.       list1:[
  25.         {
  26.             id:1,
  27.             text:'综合',
  28.             selected:true
  29.         },
  30.         {
  31.             id:1,
  32.             text:'最新上架',
  33.             selected:false
  34.         },
  35.         {
  36.             id:2,
  37.             text:'价格最低',
  38.             selected:false
  39.         },
  40.         {
  41.             id:3,
  42.             text:'价格最高',
  43.             selected:false
  44.         },
  45.         {
  46.             id:4,
  47.             text:'评价最多',
  48.             selected:false
  49.         }
  50.       ],
  51.       list2:[{
  52.           id:1,
  53.           text:'京东物流',
  54.           selected:true
  55.         },
  56.         {
  57.           id:2,
  58.           text:'有货优先',
  59.           selected:false
  60.         },
  61.         {
  62.           id:3,
  63.           text:'海囤全球',
  64.           selected:false
  65.         },
  66.         {
  67.           id:4,
  68.           text:'货到付款',
  69.           selected:false
  70.         },
  71.         {
  72.           id:5,
  73.           text:'促销商品',
  74.           selected:false
  75.         },
  76.         {
  77.           id:6,
  78.           text:'配送全球',
  79.           selected:false
  80.         }
  81.       ],
  82.       list4:[{
  83.           id:1,
  84.           text:'海尔（Haier）',
  85.           selected:true
  86.         },
  87.         {
  88.           id:2,
  89.           text:'小天鹅（LittleSwan）',
  90.           selected:false
  91.         },
  92.         {
  93.           id:3,
  94.           text:'美的（Midea）',
  95.           selected:false
  96.         },
  97.         {
  98.           id:4,
  99.           text:'西门子（SIEMENS）',
  100.           selected:false
  101.         },
  102.         {
  103.           id:5,
  104.           text:'TCL',
  105.           selected:false
  106.         },
  107.         {
  108.           id:6,
  109.           text:'松下（Panasonic）',
  110.           selected:false
  111.         },
  112.         {
  113.           id:7,
  114.           text:'海信（Hisense）',
  115.           selected:false
  116.         },
  117.         {
  118.           id:8,
  119.           text:'惠而浦（whirlpool）',
  120.           selected:false
  121.         },
  122.         {
  123.           id:9,
  124.           text:'三洋（SANYO）',
  125.           selected:false
  126.         },
  127.         {
  128.           id:10,
  129.           text:'博世（BOSCH）',
  130.           selected:false
  131.         },
  132.         {
  133.           id:11,
  134.           text:'威力（WEILI）',
  135.           selected:false
  136.         },
  137.         {
  138.           id:12,
  139.           text:'LG',
  140.           selected:false
  141.         },
  142.         {
  143.           id:13,
  144.           text:'小鸭（LittleDuck）',
  145.           selected:false
  146.         },
  147.         {
  148.           id:14,
  149.           text:'统帅（Leader）',
  150.           selected:false
  151.         },
  152.         {
  153.           id:15,
  154.           text:'三星（SAMSUNG）',
  155.           selected:false
  156.         },
  157.         {
  158.           id:16,
  159.           text:'奥克斯（AUX）',
  160.           selected:false
  161.         },
  162.         {
  163.           id:17,
  164.           text:'志高（CHIGO）',
  165.           selected:false
  166.         },
  167.         {
  168.           id:18,
  169.           text:'创维（Skyworth）',
  170.           selected:false
  171.         }
  172.       ],
  173.       list3:[{
  174.           id:1,
  175.           text:'1级',
  176.           selected:true
  177.         },
  178.         {
  179.           id:2,
  180.           text:'2级',
  181.           selected:false
  182.         },
  183.         {
  184.           id:3,
  185.           text:'3级',
  186.           selected:false
  187.         },
  188.         {
  189.           id:4,
  190.           text:'4级',
  191.           selected:false
  192.         },
  193.         {
  194.           id:5,
  195.           text:'5级',
  196.           selected:false
  197.         }
  198.       ],
  199.     };
  200.   },
  201.   methods: {
  202.     switchMenu(param,num) {
  203.         this.num = num;
  204.         this.titlenum = param.split('isVisible')[1];
  205.         for(let key in this.visible) {
  206.           if(key !== param) {
  207.               this.visible[key] = false;
  208.           }
  209.         }
  210.       Array.from(document.querySelectorAll('.list')).forEach(item => {
  211.           item.style.zIndex = 0;
  212.       });
  213.       if(!this.visible[`${param}`]) {
  214.           document.querySelector('.list' + this.num).style.zIndex = 9999;
  215.       }
  216.       this.visible[`${param}`] = !this.visible[`${param}`];
  217.     },
  218.     chooseMenu(item,index) {
  219.         this.switchMenu('isVisible1',1);
  220.         this.list1.map((value,key) => value.selected = false);
  221.         this.$set(this.list1[index],'selected',true);
  222.         this.$refs.title1.innerText = item.text;
  223.     },
  225.     reset(list) {
  226.         this.$refs[`title${this.titlenum}`].innerText = 'menu';
  227.     },
  228.     ok(list) {
  229.         let arr = [];
  230.         list.forEach((item,index) => {
  231.             if(item.selected) {
  232.                 arr.push(item.text);
  233.             }
  234.         });
  236.         if(!!arr.length) {
  237.             this.$refs[`title${this.titlenum}`].innerText = arr.join();
  238.         }
  239.     },
  240.     maxTip() {
  241.         alert('超过了最大选择数');
  242.     }
  243.   }
  244. };

Prop

字段说明类型默认值
isAnimation是否启用动画Booleantrue
isVisible是否显示Booleanfalse
type单选simple，多选multipleStringsimple
col显示的列数String/Number1
mulstyle多选样式，内置三种style1、style2、style3Stringstyle1
max多选下，允许选择的最大标签数String/Number5
list选项列表Array[]

Event

字段说明回调参数
close遮罩点击无
choose单选下，选择之后触发1.选择的列表对象。2.列表索引
maxTip多选下，选择的数量最大时触发无
reset多选下，重置按钮触发返回重置之后的列表
ok多选下，点击确定之后触发返回列表

Menu 菜单 - 图1