mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-25 01:40:31 +03:00
Code Activity

Scrollable (#3)

Browse Source 
* Add ability to close context menu on scroll

* Update README

* Update test page

* Update changelog
This commit is contained in:
Randall Wilk
2018-05-29 12:44:52 -05:00
committed by GitHub
parent c1890e5a02
commit ca7b95b553
7 changed files with 173 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+3
View File
@@ -1,5 +1,8 @@
# Changelog # Changelog
### 3.1.0 (May 29, 2018)
- *Add:* Close context menu automatically on window scroll
### 3.0.2 (May 28, 2018) ### 3.0.2 (May 28, 2018)
- Update documentation - Update documentation
- Add [demos](https://rawilk.github.io/vue-context) for the component - Add [demos](https://rawilk.github.io/vue-context) for the component
README.md
+6
View File
@@ -144,6 +144,12 @@ new Vue({
}).$mount('#app'); }).$mount('#app');
``` ```
## Props
| Property | Type | Default | Description
| -------- | ---- | ------- | -----------
| `closeOnScroll` | Boolean | `true` | If set to true, context menu will automatically close on window scroll.
## Credits ## Credits
vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu) vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)
dist/vue-context.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/vue-context.vue
+54 -1
View File
@@ -13,6 +13,13 @@
<script> <script>
export default { export default {
props: {
closeOnScroll: {
type: Boolean,
default: true
},
},
computed: { computed: {
/** /**
* Generate the CSS styles for positioning the context menu. * Generate the CSS styles for positioning the context menu.
@@ -35,7 +42,26 @@
}; };
}, },
mounted () {
if (this.closeOnScroll) {
this.addScrollEventListener();
}
},
beforeDestroy () {
if (this.closeOnScroll) {
this.removeScrollEventListener();
}
},
methods: { methods: {
/**
* Add scroll event listener to close context menu.
*/
addScrollEventListener () {
window.addEventListener('scroll', this.close);
},
/** /**
* Close the context menu. * Close the context menu.
*/ */
@@ -82,8 +108,35 @@
this.top = top; this.top = top;
this.left = left; this.left = left;
} },
/**
* Remove the scroll event listener to close the context menu.
*/
removeScrollEventListener () {
window.removeEventListener('scroll', this.close);
},
}, },
watch: {
/**
* Add or remove the scroll event listener when the prop value changes.
*
* @param {boolean} value
* @param {boolean} oldValue
*/
closeOnScroll (value, oldValue) {
if (value === oldValue) {
return;
}
if (value) {
this.addScrollEventListener();
} else {
this.removeScrollEventListener();
}
}
}
}; };
</script> </script>
test/index.html
+2 -2
View File
@@ -4,13 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Vue Context Test Page</title> <title>Vue Context Test Page</title>
</head> </head>
<body> <body style="height:2000px;">
<div id="app"> <div id="app">
<p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })"> <p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
Right click on me Right click on me
</p> </p>
<vue-context ref="menu"> <vue-context ref="menu" :close-on-scroll="close">
<ul slot-scope="child"> <ul slot-scope="child">
<li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li> <li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li>
<li>Option 2</li> <li>Option 2</li>
test/js/dist/index.js
Vendored
+103 -158
View File
File diff suppressed because one or more lines are too long
test/js/src/index.js
+4
View File
@@ -6,6 +6,10 @@ new Vue({
VueContext VueContext
}, },
data: {
close: true
},
methods: { methods: {
onClick (data) { onClick (data) {
console.log(data); console.log(data);