2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>Vue Menu Component</Title>
|
|
|
|
|
<Meta name="description" content="Menu is a navigation/command component that supports dynamic and static positioning." />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-09-09 20:41:18 +00:00
|
|
|
<div class="content-section introduction">
|
|
|
|
|
<div class="feature-intro">
|
|
|
|
|
<h1>Menu</h1>
|
|
|
|
|
<p>Menu is a navigation / command component that supports dynamic and static positioning.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<AppDemoActions />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section implementation">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Inline</h5>
|
2023-01-16 10:07:27 +00:00
|
|
|
<Menu id="menu" :model="items" />
|
2022-09-09 20:41:18 +00:00
|
|
|
|
|
|
|
|
<h5>Overlay</h5>
|
|
|
|
|
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
|
2022-12-08 12:26:57 +00:00
|
|
|
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<MenuDoc />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import MenuDoc from './MenuDoc';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Options',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Update',
|
|
|
|
|
icon: 'pi pi-refresh',
|
|
|
|
|
command: () => {
|
|
|
|
|
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Delete',
|
|
|
|
|
icon: 'pi pi-times',
|
|
|
|
|
command: () => {
|
|
|
|
|
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Navigate',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Vue Website',
|
|
|
|
|
icon: 'pi pi-external-link',
|
|
|
|
|
url: 'https://vuejs.org/'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Router',
|
|
|
|
|
icon: 'pi pi-upload',
|
|
|
|
|
to: '/fileupload'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggle(event) {
|
|
|
|
|
this.$refs.menu.toggle(event);
|
|
|
|
|
},
|
|
|
|
|
save() {
|
|
|
|
|
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
MenuDoc: MenuDoc
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
