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. },
  224. reset(list) {
  225. this.$refs[`title${this.titlenum}`].innerText = 'menu';
  226. },
  227. ok(list) {
  228. let arr = [];
  229. list.forEach((item,index) => {
  230. if(item.selected) {
  231. arr.push(item.text);
  232. }
  233. });
  234. if(!!arr.length) {
  235. this.$refs[`title${this.titlenum}`].innerText = arr.join();
  236. }
  237. },
  238. maxTip() {
  239. alert('超过了最大选择数');
  240. }
  241. }
  242. };

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多选下,点击确定之后触发返回列表