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

Menu \u83DC\u5355\u7EC4\u4EF6

\u4ECB\u7ECD

\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868

\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\u6CD5

<nut-menu>
  <nut-menu-item title="\u5168\u90E8\u5546\u54C1" :options="options1"></nut-menu-item>
</nut-menu>

 setup() {
  const options1 = [
      { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
      { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
      { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },
  ]

  const options2 = [
    { text: '\u9ED8\u8BA4\u6392\u5E8F', value: 'a' },
    { text: '\u597D\u8BC4\u6392\u5E8F', value: 'b' },
    { text: '\u9500\u91CF\u6392\u5E8F', value: 'c' },
  ]
 }

\u4E24\u5217\u6807\u9898

<nut-menu>
  <nut-menu-item title="\u5168\u90E8\u5546\u54C1" :options="options1"></nut-menu-item>
  <nut-menu-item title="\u9ED8\u8BA4\u6392\u5E8F" :options="options2"></nut-menu-item>
</nut-menu>

\u83B7\u53D6\u9009\u62E9\u7684\u5217\u8868\u5BF9\u8C61

<nut-menu @choose="handleChoose">
  <nut-menu-item title="\u5168\u90E8\u5546\u54C1" :options="options1"></nut-menu-item>
</nut-menu>

 setup() {
  const handleChoose = (val, index) => {
    console.log(val, index)
  }
 }

\u4E00\u884C\u4E24\u5217\u5217\u8868\u5BF9\u8C61

<nut-menu col="2">
  <nut-menu-item title="\u5168\u90E8\u5546\u54C1" :options="options1"></nut-menu-item>
</nut-menu>

\u7981\u7528\u83DC\u5355

<nut-menu>
  <nut-menu-item title="\u5168\u90E8\u5546\u54C1" disabled="true" :options="options1"></nut-menu-item>
</nut-menu>

\u81EA\u5B9A\u4E49\u9009\u9879\u7684\u9009\u4E2D\u6001\u56FE\u6807\u989C\u8272

<nut-menu active-color="green">
  <nut-menu-item title="\u5168\u90E8\u5546\u54C1" :options="options1"></nut-menu-item>
</nut-menu>

\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9

<nut-menu>
  <nut-menu-item title="\u7B5B\u9009" ref="item">
    <div class="customer-item-demo">
      <div :style="{'display': 'flex','justify-content': 'space-between', 'align-items': 'center'}">
      <nut-button @click="handleClick">\u5173\u95ED</nut-button>
    </div>
  </nut-menu-item>
</nut-menu>

 setup() {
  const item = ref<HTMLElement>()

  const handleClick = () => {
    item.value.toggle()
  }
 }

API

Props

nut-menu

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
col	\u663E\u793A\u7684\u5217\u6570	String/Number	1
active-color	\u9009\u9879\u7684\u9009\u4E2D\u6001\u56FE\u6807\u989C\u8272	String	#f00

nut-menu-item

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u6807\u9898	String	-
options	\u5217\u8868\u5BF9\u8C61	Array	-
disabled	\u662F\u5426\u7981\u7528\u83DC\u5355	Boolean	false

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
choose	\u5355\u9009\u4E0B\uFF0C\u9009\u62E9\u4E4B\u540E\u89E6\u53D1	1.\u9009\u62E9\u7684\u5217\u8868\u5BF9\u8C61\u30022.\u5217\u8868\u7D22\u5F15

`,31),e=[p],u={setup(c,{expose:s}){return s({frontmatter:{}}),(o,j)=>(n(),a("div",l,e))}};export{u as default};