mirror of
https://github.com/tenrok/vue-context.git
synced 2026-06-22 15:20:32 +03:00
wip
This commit is contained in:
rawilk
@@ -304,4 +304,4 @@ export default {
|
||||
|
||||
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/nested-menus.vue)
|
||||
|
||||
<script src="../scripts/vue-context-advanced-demos.1598840580885.js"></script>
|
||||
<script src="../scripts/vue-context-advanced-demos.1598841649510.js"></script>
|
||||
|
||||
+23
-23
@@ -6,7 +6,7 @@ sort: 1
|
||||
{.tip}
|
||||
> Right click on each item to open the context menu.
|
||||
|
||||
<div id="app" style="margin-bottom: 1rem;">
|
||||
<div id="basic-app" style="margin-bottom: 1rem;">
|
||||
<basic-usage></basic-usage>
|
||||
</div>
|
||||
|
||||
@@ -52,31 +52,31 @@ sort: 1
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueContext from 'vue-context';
|
||||
import 'vue-context/src/sass/vue-context.scss';
|
||||
import VueContext from 'vue-context';
|
||||
import 'vue-context/src/sass/vue-context.scss';
|
||||
|
||||
export default {
|
||||
components: { VueContext },
|
||||
export default {
|
||||
components: { VueContext },
|
||||
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros'
|
||||
]
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros',
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(text) {
|
||||
alert(`You clicked on: "${text}"`);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick (text) {
|
||||
alert(`You clicked on: "${text}"`);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
<script src="../scripts/vue-context-demos.js"></script>
|
||||
<script src="../scripts/vue-context-basic-demos.1598841649507.js"></script>
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Props Demo
|
||||
sort: 3
|
||||
---
|
||||
|
||||
## Close on click
|
||||
|
||||
When `closeOnClick` is set to `false`, the context menu will not automatically close when clicked on.
|
||||
You can toggle this feature on and off in this demo by using the checkbox below.
|
||||
|
||||
<div id="close-on-click-app" style="margin-bottom: 1rem;">
|
||||
<close-on-click></close-on-click>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="mt-4">
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center">
|
||||
<input id="toggle-close"
|
||||
type="checkbox"
|
||||
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
|
||||
v-model="closeOnClick"
|
||||
>
|
||||
<label for="toggle-close" class="ml-2 block text-sm leading-5 text-gray-900">
|
||||
Close on Click
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul class="demo">
|
||||
<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" :close-on-click="closeOnClick">
|
||||
<li>
|
||||
<a>
|
||||
{{ closeOnClick ? 'I will close on click' : 'I will stay open on click' }}
|
||||
</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 {
|
||||
closeOnClick: false,
|
||||
items: [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros',
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/props/close-on-click.vue)
|
||||
|
||||
## Close on scroll
|
||||
|
||||
If `closeOnScroll` is set to `true`, the context menu will close automatically when the window is scrolled.
|
||||
You can toggle this feature on and off in this demo by using the checkbox below.
|
||||
|
||||
<div id="close-on-scroll-app">
|
||||
<close-on-scroll></close-on-scroll>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="mt-4">
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center">
|
||||
<input id="toggle-scroll"
|
||||
type="checkbox"
|
||||
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
|
||||
v-model="closeOnScroll"
|
||||
>
|
||||
<label for="toggle-scroll" class="ml-2 block text-sm leading-5 text-gray-900">
|
||||
Close on Scroll
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul class="demo">
|
||||
<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" :close-on-scroll="closeOnScroll">
|
||||
<li>
|
||||
<a>
|
||||
{{ closeOnScroll ? 'I will hide when the window is scrolled' : 'I will stay visible when the window is scrolled' }}
|
||||
</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 {
|
||||
closeOnScroll: true,
|
||||
items: [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
'Vestibulum at eros'
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/props/close-on-scroll.vue)
|
||||
|
||||
<script src="../scripts/vue-context-props-demos.1598841649513.js"></script>
|
||||
Reference in New Issue
Block a user