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