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

formatting

Browse Source
This commit is contained in:
Randall Wilk
2018-05-30 12:19:59 -05:00
parent 0c754dd3d4
commit e4b1cc6cc3
1 changed files with 152 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vue-context.vue
+152 -152
View File
@@ -1,179 +1,179 @@
<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>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
closeOnScroll: { closeOnScroll: {
type: Boolean, type: Boolean,
default: true default: true
}, },
}, },
computed: { computed: {
/** /**
* Generate the CSS styles for positioning the context menu. * Generate the CSS styles for positioning the context menu.
* *
* @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: {
/** /**
* 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.
* *
* @param {Event} event * @param {Event} event
* @param {object} data * @param {object} data
*/ */
open (event, data) { open (event, data) {
this.data = data; this.data = data;
this.show = true; this.show = true;
this.$nextTick(() => { this.$nextTick(() => {
this.positionMenu(event.clientY, event.clientX); this.positionMenu(event.clientY, event.clientX);
this.$el.focus(); this.$el.focus();
}); });
}, },
/** /**
* Set the context menu top and left positions. * Set the context menu top and left positions.
* *
* @param {number} top * @param {number} top
* @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: {
/** /**
* Add or remove the scroll event listener when the prop value changes. * Add or remove the scroll event listener when the prop value changes.
* *
* @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>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue600: #1e88e5; $blue600: #1e88e5;
$gray74: #bdbdbd; $gray74: #bdbdbd;
$gray93: #ededed; $gray93: #ededed;
$gray98: #fafafa; $gray98: #fafafa;
.v-context { .v-context {
background: $gray98; background: $gray98;
border: 1px solid $gray74; border: 1px solid $gray74;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: fixed; position: fixed;
width: 250px; width: 250px;
z-index: 99999; z-index: 99999;
ul { ul {
list-style: none; list-style: none;
padding: 10px 0; padding: 10px 0;
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
li { li {
margin: 0; margin: 0;
padding: 10px 35px; padding: 10px 35px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $blue600; background: $blue600;
color: $gray98; color: $gray98;
} }
} }
} }
} }
</style> </style>