Fix bug
This commit is contained in:
parent
56df89f8dd
commit
5d01e19ce7
3 changed files with 32 additions and 16 deletions
|
@ -15,7 +15,20 @@ import Vue from 'vue';
|
|||
import * as anime from 'animejs';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['source', 'compact', 'items'],
|
||||
props: {
|
||||
source: {
|
||||
required: true
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hukidasi: !this.compact
|
||||
|
@ -44,13 +57,13 @@ export default Vue.extend({
|
|||
top = y;
|
||||
}
|
||||
|
||||
if (left + width > window.innerWidth) {
|
||||
left = window.innerWidth - width;
|
||||
if (left + width - window.pageXOffset > window.innerWidth) {
|
||||
left = window.innerWidth - width + window.pageXOffset;
|
||||
this.hukidasi = false;
|
||||
}
|
||||
|
||||
if (top + height > window.innerHeight) {
|
||||
top = window.innerHeight - height;
|
||||
if (top + height - window.pageYOffset > window.innerHeight) {
|
||||
top = window.innerHeight - height + window.pageYOffset;
|
||||
this.hukidasi = false;
|
||||
}
|
||||
|
||||
|
@ -139,9 +152,13 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
transform-origin center -($balloon-size)
|
||||
|
||||
&:before
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
pointer-events none
|
||||
|
||||
&:before
|
||||
top -($balloon-size * 2)
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
|
@ -150,9 +167,6 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
border-bottom solid $balloon-size $border-color
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2) + 1.5px
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="mk-note-menu" style="position:initial">
|
||||
<mk-menu ref="menu" :source="source" :compact="compact" :items="items" @closed="$destroy"/>
|
||||
<div style="position:initial">
|
||||
<mk-menu :source="source" :compact="compact" :items="items" @closed="closed"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -63,8 +63,10 @@ export default Vue.extend({
|
|||
});
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$refs.menu.close();
|
||||
closed() {
|
||||
this.$nextTick(() => {
|
||||
this.$destroy();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -23,12 +23,12 @@ export default Vue.extend({
|
|||
let x = this.x;
|
||||
let y = this.y;
|
||||
|
||||
if (x + width > window.innerWidth) {
|
||||
x = window.innerWidth - width;
|
||||
if (x + width - window.pageXOffset > window.innerWidth) {
|
||||
x = window.innerWidth - width + window.pageXOffset;
|
||||
}
|
||||
|
||||
if (y + height > window.innerHeight) {
|
||||
y = window.innerHeight - height;
|
||||
if (y + height - window.pageYOffset > window.innerHeight) {
|
||||
y = window.innerHeight - height + window.pageYOffset;
|
||||
}
|
||||
|
||||
this.$el.style.left = x + 'px';
|
||||
|
|
Loading…
Reference in a new issue