|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <ul class="magic-context-menu none-select" :style="style">
|
|
|
+ <ul class="magic-context-menu none-select" :style="style" ref="element">
|
|
|
<li v-for="(menu, key) in menus" :key="key" :class="{ divided: menu.divided }" @click.stop="() => {onMouseup(); menu.onClick && menu.onClick()}">
|
|
|
<span v-if="hasIcon" class="magic-context-menu-icon"><magic-icon :icon="menu.icon" v-if="menu.icon" size="12px"/></span>
|
|
|
<label>{{ menu.label }}</label>
|
|
@@ -7,6 +7,8 @@
|
|
|
</ul>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import {ref} from 'vue'
|
|
|
+
|
|
|
export default {
|
|
|
props: {
|
|
|
menus: Array,
|
|
@@ -17,18 +19,24 @@ export default {
|
|
|
return {
|
|
|
style: {
|
|
|
left: this.position.x + 'px',
|
|
|
- top: this.position.y + 'px'
|
|
|
+ top: this.position.y + 'px',
|
|
|
+ element: ref(null)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
document.addEventListener('click', this.onMouseup)
|
|
|
- const max = this.position.x + this.$root.$el.offsetWidth
|
|
|
- const rect = document.querySelector('.magic-editor').getBoundingClientRect()
|
|
|
- if(rect.x + rect.width < max){
|
|
|
- this.style.left = `${rect.x + rect.width - this.$root.$el.offsetWidth}px`
|
|
|
+ const rootRect = document.querySelector('.magic-editor').getBoundingClientRect()
|
|
|
+ const xMax = rootRect.x + rootRect.width
|
|
|
+ const yMax = rootRect.y + rootRect.height
|
|
|
+ const rect = this.$el.getBoundingClientRect()
|
|
|
+ if(rect.x + rect.width > xMax){
|
|
|
+ this.style.left = `${xMax - rect.width}px`
|
|
|
}
|
|
|
-
|
|
|
+ if(rect.y + rect.height > yMax){
|
|
|
+ this.style.top = `${yMax - rect.height}px`
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
unmounted(){
|
|
|
document.removeEventListener('click', this.onMouseup)
|
|
@@ -47,7 +55,7 @@ export default {
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.magic-context-menu{
|
|
|
- position: fixed;
|
|
|
+ position: absolute;
|
|
|
z-index: 999999;
|
|
|
background-color: var(--main-background-color);
|
|
|
border: 1px solid var(--main-border-color);
|
|
@@ -61,7 +69,7 @@ export default {
|
|
|
}
|
|
|
.magic-context-menu li > * {
|
|
|
cursor: pointer;
|
|
|
- word-break: keep-all;
|
|
|
+ white-space: pre;
|
|
|
}
|
|
|
.magic-context-menu li.divided{
|
|
|
border-bottom: 1px solid var(--main-border-color);
|
|
@@ -79,4 +87,4 @@ export default {
|
|
|
.magic-context-menu li:hover :deep(.magic-icon){
|
|
|
color: var(--select-option-hover-color);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|