nutui/src/packages/__VUE/menu/doc.en-US.md

Menu

Intro

The menu list that pops down downwards.

Install

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);

Basic Usage

:::demo

<template>
  <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>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: 'All Products', value: 0 },
        { text: 'New Products', value: 1 },
        { text: 'Activity Products', value: 2 }
      ],
      options2: [
        { text: 'Default Sort', value: 'a' },
        { text: 'Praise Sort', value: 'b' },
        { text: 'Sales Volume Sort', value: 'c' }
      ],
      value1: 0,
      value2: 'a'
    });

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

    return {
      state,
      handleChange
    };
  }
}
</script>

:::

Custom Menu Content

Popup can be closed with toggle method in menu instance.

:::demo

<template>
  <nut-menu>
    <nut-menu-item v-model="state.value1" :options="state.options1" />
    <nut-menu-item title="Screen" ref="item">
      <div :style="{display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center'}">
        <div :style="{ marginRight: '10px'}">Custom content</div>
        <nut-button @click="onConfirm">Confirm</nut-button>
      </div>
    </nut-menu-item>
  </nut-menu>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: 'All Products', value: 0 },
        { text: 'New Products', value: 1 },
        { text: 'Activity Products', value: 2 }
      ],
      value1: 0
    });

    const item = ref('');

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

    return {
      state,
      item,
      onConfirm
    };
  }
}
</script>

:::

Two Cols In One Line

:::demo

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

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options3: [
        { text: 'All Products', value: 0 },
        { text: 'Product1', value: 1 },
        { text: 'Product2', value: 2 },
        { text: 'Product3', value: 3 },
        { text: 'Product4', value: 4 },
        { text: 'Product5', value: 5 },
        { text: 'Product6', value: 6 },
        { text: 'Product7', value: 7 },
        { text: 'Product8', value: 8 },
        { text: 'Product9', value: 9 },
        { text: 'Product10', value: 10 },
        { text: 'Product11', value: 11 },
        { text: 'Product12', value: 12 },
        { text: 'Product13', value: 13 },
        { text: 'Product14', value: 14 },
        { text: 'Product15', value: 15 },
        { text: 'Product16', value: 16 },
        { text: 'Product17', value: 17 }
      ],
      value3: 0
    });

    return {
      state
    };
  }
}
</script>

:::

Custom Active Color

:::demo

<template>
  <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>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: 'All Products', value: 0 },
        { text: 'New Products', value: 1 },
        { text: 'Activity Products', value: 2 }
      ],
      options2: [
        { text: 'Default Sort', value: 'a' },
        { text: 'Praise Sort', value: 'b' },
        { text: 'Sales Volume Sort', value: 'c' }
      ],
      value1: 0,
      value2: 'a'
    });

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

    return {
      state,
      handleChange
    };
  }
}
</script>

:::

Custom Icons

:::demo

<template>
  <nut-menu>
    <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
  </nut-menu>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: 'All Products', value: 0 },
        { text: 'New Products', value: 1 },
        { text: 'Activity Products', value: 2 }
      ],
      options2: [
        { text: 'Default Sort', value: 'a' },
        { text: 'Praise Sort', value: 'b' },
        { text: 'Sales Volume Sort', value: 'c' }
      ],
      value1: 0,
      value2: 'a'
    });

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

    return {
      state,
      handleChange
    };
  }
}
</script>

:::

Expand Directions

:::demo

<template>
  <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>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: 'All Products', value: 0 },
        { text: 'New Products', value: 1 },
        { text: 'Activity Products', value: 2 }
      ],
      options2: [
        { text: 'Default Sort', value: 'a' },
        { text: 'Praise Sort', value: 'b' },
        { text: 'Sales Volume Sort', value: 'c' }
      ],
      value1: 0,
      value2: 'a'
    });

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

    return {
      state,
      handleChange
    };
  }
}
</script>

:::

Disable Menu

:::demo

<template>
  <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>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      options1: [
        { text: 'All Products', value: 0 },
        { text: 'New Products', value: 1 },
        { text: 'Activity Products', value: 2 }
      ],
      options2: [
        { text: 'Default Sort', value: 'a' },
        { text: 'Praise Sort', value: 'b' },
        { text: 'Sales Volume Sort', value: 'c' }
      ],
      options3: [
        { text: 'All Products', value: 0 },
        { text: 'Product1', value: 1 },
        { text: 'Product2', value: 2 },
        { text: 'Product3', value: 3 },
        { text: 'Product4', value: 4 },
        { text: 'Product5', value: 5 },
        { text: 'Product6', value: 6 },
        { text: 'Product7', value: 7 },
        { text: 'Product8', value: 8 },
        { text: 'Product9', value: 9 },
        { text: 'Product10', value: 10 },
        { text: 'Product11', value: 11 },
        { text: 'Product12', value: 12 },
        { text: 'Product13', value: 13 },
        { text: 'Product14', value: 14 },
        { text: 'Product15', value: 15 },
        { text: 'Product16', value: 16 },
        { text: 'Product17', 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
    };
  }
}
</script>

:::

API

Menu Props

Attribute	Description	Type	Default
active-color	Active color of title and option	String	#F2270C
close-on-click-overlay v3.1.21	Whether to close when overlay is clicked	Boolean	true
scroll-fixed v3.1.22	Whether to fixed when window is scrolled, fixed position can be set	Boolean、String、Number	false
title-class v3.1.22	Custome title class	String	-
lock-scroll v3.1.22	Whether the background is locked	Boolean	true

MenuItem Props

Attribute	Description	Type	Default
title	Item title	String	当前选中项文字
options	Options	Array	-
disabled	Whether to disable dropdown item	Boolean	false
cols	Display how many options in one line	Number	1
title-icon	Custome title icon	String	-
option-icon v3.1.22	Custome option icon	String	'Check'
direction v3.1.22	Expand direction, can be set to up	String	'down'

MenuItem Events

Event	Description	Arguments
change	Emitted select option changed	Selected value