import{c as t,o as e,A as n}from"./vendor.80bf15c7.js";const u={class:"markdown-body"},o=n('

Menu 菜单组件

介绍

下拉选择菜单组件

安装

import { createApp } from 'vue';\nimport { Menu } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Menu);\n\n

代码演示

基础用法1

Menu 属性支持传入列表数据menuList和title名称设置。

<nut-menu>\n  <nut-menu-item :menu-list="menuList" title="最新商品" ></nut-menu-item>\n  <nut-menu-item :menu-list="menuList" :title="title" ></nut-menu-item>\n</nut-menu>\n

 setup() {\n    const resData = reactive({\n      title: '热门推荐',\n      menuList: [\n        {value: '手机'},\n        {value: '电脑'},\n        {value: '家用电器'},\n        {value: '日用百货'}\n      ]\n    });\n }\n\n

菜单多列展示

Menu 的 multiStyle 属性配置1列、2列、3列展示菜单列表，默认单列展示。 maxHeight 属性可控制菜单列表的最大高度。

<nut-menu>\n    <nut-menu-item :menu-list="menuList2" title="单列展示" multi-style="1" maxHeight="200"></nut-menu-item>\n    <nut-menu-item :menu-list="menuList2" title="双列展示"  multi-style="2"></nut-menu-item>\n    <nut-menu-item :menu-list="menuList2" title="三列展示"  multi-style="3"></nut-menu-item>\n</nut-menu>\n

禁用操作

Menu 的 disabled 属性可对菜单列表进行禁用操作。 autoClose 属性控制下拉菜单列表是否选择后自动收起，默认自动收起。

<nut-menu>\n    <nut-menu-item :menu-list="menuList" title="最新商品"></nut-menu-item>\n    <nut-menu-item :menu-list="menuList" title="title" :auto-close="false"></nut-menu-item>\n    <nut-menu-item :menu-list="menuList2" title="筛选" disabled ></nut-menu-item>\n</nut-menu>\n

禁止蒙层展示

属性hasMask控制是否有蒙层，默认为 true展示蒙层

<nut-menu :hasMask="false">\n    <nut-menu-item :menu-list="menuList" title="最新商品">\n    </nut-menu-item>\n    <nut-menu-item :menu-list="menuList" :title="title">\n    </nut-menu-item>\n</nut-menu>\n

点击事件

Menu 的 @menu-click 事件返回点击的菜单标题，@on-change事件返回菜单列表选中的数据。

<nut-menu>\n    <nut-menu-item\n        :menu-list="menuList2"\n        title="选择菜单列表项"\n        multi-style="2"\n        @menu-click="alertText($event, 'title')"\n        @on-change="getChecked"\n    ></nut-menu-item>\n    <nut-menu-item\n        :menu-list="menuList2"\n        title="选中标题触发"\n        disabled\n        @menu-click="alertText"\n    ></nut-menu-item>\n </nut-menu>\n

const getChecked = (info: any, name: string) => {\n    alert('选择菜单选项：' + name);\n    console.log(11, info, name);\n};\nconst alertText = (info, type) => {\n    console.log(info, type);\n    if (type == 'title') {\n        alert('菜单标题点击：' + info);\n    } else {\n        alert('禁用操作');\n    }\n};\n

自定义内容

<nut-menu>\n    <nut-menu-item title="自定义选项">\n        <div class="user-style">\n          <nut-cell>\n            设置为默认 <nut-switch></nut-switch>\n          </nut-cell>\n          <nut-cell>\n            <nut-button size="large" type="primary">确认提交</nut-button>\n          </nut-cell>\n        </div>\n    </nut-menu-item>\n</nut-menu>\n

API

Props

参数	说明	类型	默认值
title	菜单标题名称或可为菜单列表第一项，必填	String	-
menu-list	菜单列表数据，必填	Array	-
multi-style	列表列数设置，默认1列，可选值 `1` `2` `3`	String, Number	1
disabled	是否开启禁用设置，默认不开启	Boolean	false
max-height	菜单列表最大高度，单位px	String, Number	-
auto-close	选择后下拉菜单列表是否自动收起，默认自动收起	Boolean	true
has-mask	是否有蒙层	Boolean	true

Events

事件名	说明	回调参数
menu-click	点击菜单标题触发，返回菜单标题名称	event: Event
on-change	点击菜单列表选项触发，返回选中菜单项数据、名称	event: Event

',30),l={expose:[],setup:n=>(n,l)=>(e(),t("div",u,[o]))};export default l;