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

formatting

Browse Source
This commit is contained in:
Randall Wilk
2018-05-30 12:07:38 -05:00
parent e371cac4f8
commit 0c754dd3d4
1 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vue-context.vue
+56 -56
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="v-context" <div class="v-context"
v-show="show" v-show="show"
:style="style" :style="style"
tabindex="-1" tabindex="-1"
@blur="close" @blur="close"
@click="close" @click="close"
@contextmenu.capture.prevent @contextmenu.capture.prevent
> >
<slot :data="data"></slot> <slot :data="data"></slot>
</div> </div>
@@ -14,10 +14,10 @@
<script> <script>
export default { export default {
props: { props: {
closeOnScroll: { closeOnScroll: {
type: Boolean, type: Boolean,
default: true default: true
}, },
}, },
computed: { computed: {
@@ -26,32 +26,32 @@
* *
* @returns {object|null} * @returns {object|null}
*/ */
style () { style () {
return this.show return this.show
? { top: `${this.top}px`, left: `${this.left}px` } ? { top: `${this.top}px`, left: `${this.left}px` }
: null; : null;
}, },
}, },
data () { data () {
return { return {
top: null, top: null,
left: null, left: null,
show: false, show: false,
data: null data: null
}; };
}, },
mounted () { mounted () {
if (this.closeOnScroll) { if (this.closeOnScroll) {
this.addScrollEventListener(); this.addScrollEventListener();
} }
}, },
beforeDestroy () { beforeDestroy () {
if (this.closeOnScroll) { if (this.closeOnScroll) {
this.removeScrollEventListener(); this.removeScrollEventListener();
} }
}, },
methods: { methods: {
@@ -59,18 +59,18 @@
* Add scroll event listener to close context menu. * Add scroll event listener to close context menu.
*/ */
addScrollEventListener () { addScrollEventListener () {
window.addEventListener('scroll', this.close); window.addEventListener('scroll', this.close);
}, },
/** /**
* Close the context menu. * Close the context menu.
*/ */
close () { close () {
this.top = null; this.top = null;
this.left = null; this.left = null;
this.data = null; this.data = null;
this.show = false; this.show = false;
}, },
/** /**
* Open the context menu. * Open the context menu.
@@ -95,27 +95,27 @@
* @param {number} left * @param {number} left
*/ */
positionMenu (top, left) { positionMenu (top, left) {
const largestHeight = window.innerHeight - this.$el.offsetHeight - 25; const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
const largestWidth = window.innerWidth - this.$el.offsetWidth - 25; const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
if (top > largestHeight) { if (top > largestHeight) {
top = largestHeight; top = largestHeight;
} }
if (left > largestWidth) { if (left > largestWidth) {
left = largestWidth; left = largestWidth;
} }
this.top = top; this.top = top;
this.left = left; this.left = left;
}, },
/** /**
* Remove the scroll event listener to close the context menu. * Remove the scroll event listener to close the context menu.
*/ */
removeScrollEventListener () { removeScrollEventListener () {
window.removeEventListener('scroll', this.close); window.removeEventListener('scroll', this.close);
}, }
}, },
watch: { watch: {
@@ -125,17 +125,17 @@
* @param {boolean} value * @param {boolean} value
* @param {boolean} oldValue * @param {boolean} oldValue
*/ */
closeOnScroll (value, oldValue) { closeOnScroll (value, oldValue) {
if (value === oldValue) { if (value === oldValue) {
return; return;
} }
if (value) { if (value) {
this.addScrollEventListener(); this.addScrollEventListener();
} else { } else {
this.removeScrollEventListener(); this.removeScrollEventListener();
} }
} }
} }
}; };
</script> </script>