Menu

Demo

Menu 跨端示例与演示

Product catalog128 products

FiltersRecommended · All stock

Varo Pro annual planIn stock

¥299

Registry Block packIn stock

¥129

Agent UI templatePre-order

¥89

Basic Usage

<script setup lang="ts">
import { VMenu, VMenuItem } from '@varo-ui/h5'
import { ref } from 'vue'

const activeName = ref()
const value = ref('all')
const options = [
  { text: 'All items', value: 'all' },
  { text: 'Newest first', value: 'new' },
  { text: 'Price order', value: 'price' }
]
</script>

<template>
  <VMenu v-model:active-name="activeName">
    <VMenuItem v-model="value" name="sort" title="Sort" :options="options" />
  </VMenu>
</template>

VMenu Props

Prop	Type	Default	Description
activeName	string | number	undefined	Open item name
defaultActiveName	string | number	undefined	Default uncontrolled open item

VMenu Events

Event	Payload	Description
update:activeName	string | number | undefined	Open item changed
open	string | number	Item opened
close	void	Item closed

VMenuItem Props

Prop	Type	Default	Description
name	string | number	-	Item name
title	string	undefined	Item title
options	MenuOption[]	[]	Options
modelValue	string | number	undefined	Selected value

VMenuItem Events

Event	Payload	Description
update:modelValue	string | number	Selected value changed
select	(value, option)	Option selected