This commit is contained in:
syuilo 2018-06-10 03:27:10 +09:00
parent 56df89f8dd
commit 5d01e19ce7
3 changed files with 32 additions and 16 deletions

View file

@ -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

View file

@ -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();
});
} }
} }
}); });

View file

@ -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';