primevue-mirror/doc/menu/RouterDoc.vue

219 lines
7.4 KiB
Vue
Raw Normal View History

2023-08-29 12:50:04 +00:00
<template>
2023-08-30 07:26:11 +00:00
<DocSectionText v-bind="$attrs">
<p>
2023-08-30 13:33:42 +00:00
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
2023-08-30 07:26:11 +00:00
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
2023-08-29 12:50:04 +00:00
<div class="card flex justify-content-center">
<Menu :model="items">
<template #item="{ label, item, props }">
2023-08-30 08:53:10 +00:00
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
2023-08-29 12:50:04 +00:00
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
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/',
target: '_blank'
},
{
label: 'Upload',
icon: 'pi pi-upload',
2023-08-30 08:53:10 +00:00
route: '/fileupload'
2023-08-29 12:50:04 +00:00
}
]
}
],
code: {
2023-09-22 12:54:14 +00:00
basic: `
<Menu :model="items">
2023-08-29 12:50:04 +00:00
<template #item="{ label, item, props }">
2023-08-30 08:53:10 +00:00
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
2023-08-29 12:50:04 +00:00
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>`,
2023-09-22 12:54:14 +00:00
options: `
<template>
2023-08-29 12:50:04 +00:00
<div class="card flex justify-content-center">
<Menu :model="items">
<template #item="{ label, item, props }">
2023-08-30 08:53:10 +00:00
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
2023-08-29 12:50:04 +00:00
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>
<Toast />
</div>
</template>
<script>
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/',
target: '_blank',
},
{
label: 'Upload',
icon: 'pi pi-upload',
2023-08-30 08:53:10 +00:00
route: '/fileupload'
2023-08-29 12:50:04 +00:00
}
]
}
]
};
}
};
<\/script>`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
2023-08-29 12:50:04 +00:00
<div class="card flex justify-content-center">
<Menu :model="items">
<template #item="{ label, item, props }">
2023-08-30 08:53:10 +00:00
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
2023-08-29 12:50:04 +00:00
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>
<Toast />
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref(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/',
target: '_blank',
},
{
label: 'Upload',
icon: 'pi pi-upload',
2023-08-30 08:53:10 +00:00
route: '/fileupload'
2023-08-29 12:50:04 +00:00
}
]
}
]);
<\/script>`
}
};
}
};
</script>