mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-21 05:00:33 +03:00
Code Activity

wip

Browse Source
This commit is contained in:
rawilk
2020-08-30 20:19:17 -05:00
parent 633eb31afd
commit 19af14b9fc
6 changed files with 478 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/demos/advanced.md
+93
View File
@@ -111,6 +111,10 @@ export default {
## Demo 2
{.tip}
> Right click on each of the colors to have a context menu appear to allow you do add or
> remove the color from the array of selected colors.
<div id="advanced-2-app">
<div style="margin-bottom: 1rem;">
<advanced-2></advanced-2>
@@ -211,4 +215,93 @@ export default {
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-2.vue)
## Nested Menus
<div id="nested-app" style="margin-bottom: 1rem;">
<nested-menus></nested-menus>
</div>
```html
<template>
<div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu">
<li>
<a @click.prevent="alertText($event.target.innerText)">Not nested</a>
</li>
<li class="v-context__sub">
<a @click.prevent="alertText($event.target.innerText)">Has sub menu</a>
<ul class="v-context">
<li>
<a @click.prevent="alertText($event.target.innerText)">Nested child</a>
</li>
<li class="v-context__sub">
<a @click.prevent="alertText($event.target.innerText)">Another nested menu</a>
<ul class="v-context">
<li>
<a @click.prevent="alertText($event.target.innerText)">Another level deep</a>
</li>
<li>
<a @click.prevent="alertText($event.target.innerText)">There is no limit</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a @click.prevent="alertText($event.target.text)">Also not nested</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
alertText(text) {
alert(`You clicked: ${text}`);
},
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/nested-menus.vue)
<script src="../scripts/vue-context-advanced-demos.js"></script>