import{e as a,o as n,G as t}from"./vendor.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, MenuItem } from '@nutui/nutui';
// taro
import { Menu, MenuItem } from '@nutui/nutui-taro';
const app = createApp();
app.use(Menu);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-menu>
  <nut-menu-item v-model="state.value1" :options="state.options1" />
  <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
</nut-menu>

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
        { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
        { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 }
      ],
      options2: [
        { text: '\u9ED8\u8BA4\u6392\u5E8F', value: 'a' },
        { text: '\u597D\u8BC4\u6392\u5E8F', value: 'b' },
        { text: '\u9500\u91CF\u6392\u5E8F', value: 'c' },
      ],
      options3: [
        { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
        { text: '\u5BB6\u5EAD\u6E05\u6D01/\u7EB8\u54C1', value: 1 },
        { text: '\u4E2A\u4EBA\u62A4\u7406', value: 2 },
        { text: '\u7F8E\u5986\u62A4\u80A4', value: 3 },
        { text: '\u98DF\u54C1\u996E\u6599', value: 4 },
        { text: '\u5BB6\u7528\u7535\u5668', value: 5 },
        { text: '\u6BCD\u5A74', value: 6 },
        { text: '\u6570\u7801', value: 7 },
        { text: '\u7535\u8111\u3001\u529E\u516C', value: 8 },
        { text: '\u8FD0\u52A8\u6237\u5916', value: 9 },
        { text: '\u53A8\u5177', value: 10 },
        { text: '\u533B\u7597\u4FDD\u5065', value: 11 },
        { text: '\u9152\u7C7B', value: 12 },
        { text: '\u751F\u9C9C', value: 13 },
        { text: '\u5BB6\u5177', value: 14 },
        { text: '\u4F20\u7EDF\u6ECB\u8865', value: 15 },
        { text: '\u6C7D\u8F66\u7528\u54C1', value: 16 },
        { text: '\u5BB6\u5C45\u65E5\u7528', value: 17 },
      ],
      value1: 0,
      value2: 'a',
      value3: 0
    });

    const item = ref('');

    const onConfirm = () => {
      item.value.toggle();
    }

    const handleChange = val => {
      console.log('val', val);
    }

    return {
      state,
      item,
      onConfirm,
      handleChange
    };
  }
}

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

\u4F7F\u7528\u5B9E\u4F8B\u4E0A\u7684 toggle \u65B9\u6CD5\u53EF\u4EE5\u624B\u52A8\u5173\u95ED\u5F39\u6846\u3002

<nut-menu>
  <nut-menu-item v-model="state.value1" :options="state.options1" />
  <nut-menu-item title="\u7B5B\u9009" ref="item">
    <div :style="{display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center'}">
      <div>\u81EA\u5B9A\u4E49\u5185\u5BB9</div>
      <div @click="onConfirm">\u5173\u95ED</div>
    </div>
  </nut-menu-item>
</nut-menu>

\u4E00\u884C\u4E24\u5217

<nut-menu>
  <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
</nut-menu>

\u81EA\u5B9A\u4E49\u9009\u4E2D\u6001\u989C\u8272

<nut-menu active-color="green">
  <nut-menu-item v-model="state.value1" :options="state.options1" />
  <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
</nut-menu>

\u7981\u7528\u83DC\u5355

<nut-menu>
  <nut-menu-item disabled v-model="state.value1" :options="state.options1" />
  <nut-menu-item disabled v-model="state.value2" @change="handleChange" :options="state.options2" />
</nut-menu>

API

Menu Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
active-color	\u9009\u9879\u7684\u9009\u4E2D\u6001\u56FE\u6807\u989C\u8272	String	#F2270C

MenuItem Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u83DC\u5355\u9879\u6807\u9898	String	\u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57
options	\u9009\u9879\u6570\u7EC4	Array	-
disabled	\u662F\u5426\u7981\u7528\u83DC\u5355	Boolean	false
cols	\u53EF\u4EE5\u8BBE\u7F6E\u4E00\u884C\u5C55\u793A\u591A\u5C11\u5217 options	Number	1
title-icon	\u81EA\u5B9A\u4E49\u6807\u9898\u56FE\u6807	String	\u2018down-arrow\u2019

MenuItem Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u9009\u62E9 option \u4E4B\u540E\u89E6\u53D1	\u9009\u62E9\u7684 value

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