vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added menu docs for router

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-08-30 16:33:42 +03:00
parent 9de8ecf838
commit 1359cd0b15
17 changed files with 1839 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

109
doc/contextmenu/RouterDoc.vue Normal file
View file

@ -0,0 +1,109 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
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
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<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>
</ContextMenu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' },
{ separator: true },
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
],
code: {
basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />`,
options: `<template>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' },
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]
};
},
methods: {
onImageRightClick(event) {
this.$refs.routemenu.show(event);
}
}
};
<\/script>`,
composition: `<template>
<div class="card">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const routemenu = ref();
const items = ref([
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' },
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]);
const onImageRightClick = (event) => {
routemenu.value.show(event);
};
<\/script>`
}
};
},
methods: {
onImageRightClick(event) {
this.$refs.routemenu.show(event);
}
}
};
</script>