mirror of
https://github.com/tenrok/vue-context.git
synced 2026-05-17 05:09:36 +03:00
formatting
This commit is contained in:
Randall Wilk
+152
-152
@@ -1,179 +1,179 @@
|
||||
<template>
|
||||
<div class="v-context"
|
||||
v-show="show"
|
||||
:style="style"
|
||||
tabindex="-1"
|
||||
@blur="close"
|
||||
@click="close"
|
||||
@contextmenu.capture.prevent
|
||||
>
|
||||
<slot :data="data"></slot>
|
||||
</div>
|
||||
<div class="v-context"
|
||||
v-show="show"
|
||||
:style="style"
|
||||
tabindex="-1"
|
||||
@blur="close"
|
||||
@click="close"
|
||||
@contextmenu.capture.prevent
|
||||
>
|
||||
<slot :data="data"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
closeOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
export default {
|
||||
props: {
|
||||
closeOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Generate the CSS styles for positioning the context menu.
|
||||
*
|
||||
* @returns {object|null}
|
||||
*/
|
||||
style () {
|
||||
return this.show
|
||||
? { top: `${this.top}px`, left: `${this.left}px` }
|
||||
: null;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* Generate the CSS styles for positioning the context menu.
|
||||
*
|
||||
* @returns {object|null}
|
||||
*/
|
||||
style () {
|
||||
return this.show
|
||||
? { top: `${this.top}px`, left: `${this.left}px` }
|
||||
: null;
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
top: null,
|
||||
left: null,
|
||||
show: false,
|
||||
data: null
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
top: null,
|
||||
left: null,
|
||||
show: false,
|
||||
data: null
|
||||
};
|
||||
},
|
||||
|
||||
mounted () {
|
||||
if (this.closeOnScroll) {
|
||||
this.addScrollEventListener();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.closeOnScroll) {
|
||||
this.addScrollEventListener();
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
if (this.closeOnScroll) {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.closeOnScroll) {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Add scroll event listener to close context menu.
|
||||
*/
|
||||
addScrollEventListener () {
|
||||
window.addEventListener('scroll', this.close);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Add scroll event listener to close context menu.
|
||||
*/
|
||||
addScrollEventListener () {
|
||||
window.addEventListener('scroll', this.close);
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the context menu.
|
||||
*/
|
||||
close () {
|
||||
this.top = null;
|
||||
this.left = null;
|
||||
this.data = null;
|
||||
this.show = false;
|
||||
},
|
||||
/**
|
||||
* Close the context menu.
|
||||
*/
|
||||
close () {
|
||||
this.top = null;
|
||||
this.left = null;
|
||||
this.data = null;
|
||||
this.show = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Open the context menu.
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {object} data
|
||||
*/
|
||||
open (event, data) {
|
||||
this.data = data;
|
||||
this.show = true;
|
||||
/**
|
||||
* Open the context menu.
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {object} data
|
||||
*/
|
||||
open (event, data) {
|
||||
this.data = data;
|
||||
this.show = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.positionMenu(event.clientY, event.clientX);
|
||||
this.$el.focus();
|
||||
});
|
||||
},
|
||||
this.$nextTick(() => {
|
||||
this.positionMenu(event.clientY, event.clientX);
|
||||
this.$el.focus();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the context menu top and left positions.
|
||||
*
|
||||
* @param {number} top
|
||||
* @param {number} left
|
||||
*/
|
||||
positionMenu (top, left) {
|
||||
const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
|
||||
const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
|
||||
/**
|
||||
* Set the context menu top and left positions.
|
||||
*
|
||||
* @param {number} top
|
||||
* @param {number} left
|
||||
*/
|
||||
positionMenu (top, left) {
|
||||
const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
|
||||
const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
|
||||
|
||||
if (top > largestHeight) {
|
||||
top = largestHeight;
|
||||
}
|
||||
if (top > largestHeight) {
|
||||
top = largestHeight;
|
||||
}
|
||||
|
||||
if (left > largestWidth) {
|
||||
left = largestWidth;
|
||||
}
|
||||
if (left > largestWidth) {
|
||||
left = largestWidth;
|
||||
}
|
||||
|
||||
this.top = top;
|
||||
this.left = left;
|
||||
},
|
||||
this.top = top;
|
||||
this.left = left;
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove the scroll event listener to close the context menu.
|
||||
*/
|
||||
removeScrollEventListener () {
|
||||
window.removeEventListener('scroll', this.close);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (value) {
|
||||
this.addScrollEventListener();
|
||||
} else {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$blue600: #1e88e5;
|
||||
$gray74: #bdbdbd;
|
||||
$gray93: #ededed;
|
||||
$gray98: #fafafa;
|
||||
$blue600: #1e88e5;
|
||||
$gray74: #bdbdbd;
|
||||
$gray93: #ededed;
|
||||
$gray98: #fafafa;
|
||||
|
||||
.v-context {
|
||||
background: $gray98;
|
||||
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);
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
z-index: 99999;
|
||||
.v-context {
|
||||
background: $gray98;
|
||||
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);
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
z-index: 99999;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 10px 35px;
|
||||
cursor: pointer;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 10px 35px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $blue600;
|
||||
color: $gray98;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $blue600;
|
||||
color: $gray98;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user