import{e as a,o as n,G as t}from"./vendor.d721e0a0.js";const l={class:"markdown-body"},p=t(`

Menu \u83DC\u5355\u7EC4\u4EF6

\u4ECB\u7ECD

\u4E0B\u62C9\u9009\u62E9\u83DC\u5355\u7EC4\u4EF6

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Menu } from '@nutui/nutui';
// taro
import { Menu,MenuItem } from '@nutui/nutui-taro';
const app = createApp();
app.use(Menu);
app.use(MenuItem);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD51

Menu \u5C5E\u6027\u652F\u6301\u4F20\u5165\u5217\u8868\u6570\u636EmenuList\u548Ctitle\u540D\u79F0\u8BBE\u7F6E\u3002

<nut-menu>
  <nut-menu-item :menu-list="menuList" title="\u6700\u65B0\u5546\u54C1" ></nut-menu-item>
  <nut-menu-item :menu-list="menuList" :title="title" ></nut-menu-item>
</nut-menu>

 setup() {
    const resData = reactive({
      title: '\u70ED\u95E8\u63A8\u8350',
      menuList: [
        {value: '\u624B\u673A'},
        {value: '\u7535\u8111'},
        {value: '\u5BB6\u7528\u7535\u5668'},
        {value: '\u65E5\u7528\u767E\u8D27'}
      ]
    });
 }

\u83DC\u5355\u591A\u5217\u5C55\u793A

Menu \u7684 multiStyle \u5C5E\u6027\u914D\u7F6E1\u5217\u30012\u5217\u30013\u5217\u5C55\u793A\u83DC\u5355\u5217\u8868\uFF0C\u9ED8\u8BA4\u5355\u5217\u5C55\u793A\u3002 maxHeight \u5C5E\u6027\u53EF\u63A7\u5236\u83DC\u5355\u5217\u8868\u7684\u6700\u5927\u9AD8\u5EA6\u3002

<nut-menu>
    <nut-menu-item :menu-list="menuList2" title="\u5355\u5217\u5C55\u793A" multi-style="1" maxHeight="200"></nut-menu-item>
    <nut-menu-item :menu-list="menuList2" title="\u53CC\u5217\u5C55\u793A"  multi-style="2"></nut-menu-item>
    <nut-menu-item :menu-list="menuList2" title="\u4E09\u5217\u5C55\u793A"  multi-style="3"></nut-menu-item>
</nut-menu>

\u7981\u7528\u64CD\u4F5C

Menu \u7684 disabled \u5C5E\u6027\u53EF\u5BF9\u83DC\u5355\u5217\u8868\u8FDB\u884C\u7981\u7528\u64CD\u4F5C\u3002 autoClose \u5C5E\u6027\u63A7\u5236\u4E0B\u62C9\u83DC\u5355\u5217\u8868\u662F\u5426\u9009\u62E9\u540E\u81EA\u52A8\u6536\u8D77\uFF0C\u9ED8\u8BA4\u81EA\u52A8\u6536\u8D77\u3002

<nut-menu>
    <nut-menu-item :menu-list="menuList" title="\u6700\u65B0\u5546\u54C1"></nut-menu-item>
    <nut-menu-item :menu-list="menuList" title="title" :auto-close="false"></nut-menu-item>
    <nut-menu-item :menu-list="menuList2" title="\u7B5B\u9009" disabled ></nut-menu-item>
</nut-menu>

\u7981\u6B62\u8499\u5C42\u5C55\u793A

\u5C5E\u6027hasMask\u63A7\u5236\u662F\u5426\u6709\u8499\u5C42\uFF0C\u9ED8\u8BA4\u4E3A true\u5C55\u793A\u8499\u5C42

<nut-menu :hasMask="false">
    <nut-menu-item :menu-list="menuList" title="\u6700\u65B0\u5546\u54C1">
    </nut-menu-item>
    <nut-menu-item :menu-list="menuList" :title="title">
    </nut-menu-item>
</nut-menu>

\u70B9\u51FB\u4E8B\u4EF6

Menu \u7684 @menu-click \u4E8B\u4EF6\u8FD4\u56DE\u70B9\u51FB\u7684\u83DC\u5355\u6807\u9898\uFF0C@change\u4E8B\u4EF6\u8FD4\u56DE\u83DC\u5355\u5217\u8868\u9009\u4E2D\u7684\u6570\u636E\u3002

<nut-menu>
    <nut-menu-item
        :menu-list="menuList2"
        title="\u9009\u62E9\u83DC\u5355\u5217\u8868\u9879"
        multi-style="2"
        @menu-click="alertText($event, 'title')"
        @change="getChecked"
    ></nut-menu-item>
    <nut-menu-item
        :menu-list="menuList2"
        title="\u9009\u4E2D\u6807\u9898\u89E6\u53D1"
        disabled
        @menu-click="alertText"
    ></nut-menu-item>
 </nut-menu>

const getChecked = (info: any, name: string) => {
    alert('\u9009\u62E9\u83DC\u5355\u9009\u9879\uFF1A' + name);
    console.log(11, info, name);
};
const alertText = (info, type) => {
    console.log(info, type);
    if (type == 'title') {
        alert('\u83DC\u5355\u6807\u9898\u70B9\u51FB\uFF1A' + info);
    } else {
        alert('\u7981\u7528\u64CD\u4F5C');
    }
};

\u81EA\u5B9A\u4E49\u5185\u5BB9

<nut-menu>
    <nut-menu-item title="\u81EA\u5B9A\u4E49\u9009\u9879">
        <div class="user-style">
          <nut-cell>
            \u8BBE\u7F6E\u4E3A\u9ED8\u8BA4 <nut-switch></nut-switch>
          </nut-cell>
          <nut-cell>
            <nut-button size="large" type="primary">\u786E\u8BA4\u63D0\u4EA4</nut-button>
          </nut-cell>
        </div>
    </nut-menu-item>
</nut-menu>

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u83DC\u5355\u6807\u9898\u540D\u79F0\u6216\u53EF\u4E3A\u83DC\u5355\u5217\u8868\u7B2C\u4E00\u9879\uFF0C\u5FC5\u586BString-
menu-list\u83DC\u5355\u5217\u8868\u6570\u636E\uFF0C\u5FC5\u586BArray-
multi-style\u5217\u8868\u5217\u6570\u8BBE\u7F6E\uFF0C\u9ED8\u8BA41\u5217\uFF0C\u53EF\u9009\u503C 1 2 3String, Number1
disabled\u662F\u5426\u5F00\u542F\u7981\u7528\u8BBE\u7F6E\uFF0C\u9ED8\u8BA4\u4E0D\u5F00\u542FBooleanfalse
max-height\u83DC\u5355\u5217\u8868\u6700\u5927\u9AD8\u5EA6\uFF0C\u5355\u4F4DpxString, Number-
auto-close\u9009\u62E9\u540E\u4E0B\u62C9\u83DC\u5355\u5217\u8868\u662F\u5426\u81EA\u52A8\u6536\u8D77\uFF0C\u9ED8\u8BA4\u81EA\u52A8\u6536\u8D77Booleantrue
has-mask\u662F\u5426\u6709\u8499\u5C42Booleantrue

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
menu-click\u70B9\u51FB\u83DC\u5355\u6807\u9898\u89E6\u53D1\uFF0C\u8FD4\u56DE\u83DC\u5355\u6807\u9898\u540D\u79F0event: Event
change\u70B9\u51FB\u83DC\u5355\u5217\u8868\u9009\u9879\u89E6\u53D1\uFF0C\u8FD4\u56DE\u9009\u4E2D\u83DC\u5355\u9879\u6570\u636E\u3001\u540D\u79F0event: Event
`,30),e=[p],r={setup(c,{expose:s}){return s({frontmatter:{}}),(u,j)=>(n(),a("div",l,e))}};export{r as default};