This commit is contained in:
こぴなたみぽ 2018-02-11 18:50:30 +09:00
parent a7f62e50f9
commit 6cf1fdbf82

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-window" :data-flexible="isFlexible" @dragover="onDragover"> <div class="mk-window" :data-flexible="isFlexible" @dragover="onDragover">
<div class="bg" ref="bg" v-show="isModal" @click="onBgClick"></div> <div class="bg" ref="bg" v-show="isModal" @click="onBgClick"></div>
<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown"> <div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
<div class="body"> <div class="body">
<header ref="header" @mousedown="onHeaderMousedown"> <header ref="header" @mousedown="onHeaderMousedown">
<h1 data-yield="header"><yield from="header"/></h1> <h1 data-yield="header"><yield from="header"/></h1>
@ -42,8 +42,13 @@ export default Vue.extend({
type: Boolean, type: Boolean,
default: true default: true
}, },
width: {
type: String,
default: '530px'
},
height: { height: {
type: Number type: String,
default: 'auto'
}, },
popoutUrl: { popoutUrl: {
type: String type: String
@ -56,6 +61,9 @@ export default Vue.extend({
canResize(): boolean { canResize(): boolean {
return !this.isFlexible; return !this.isFlexible;
} }
},
mounted() {
} }
}); });
</script> </script>
@ -64,8 +72,6 @@ export default Vue.extend({
<script lang="typescript"> <script lang="typescript">
this.on('mount', () => { this.on('mount', () => {
this.$refs.main.style.width = this.opts.width || '530px';
this.$refs.main.style.height = this.opts.height || 'auto';
this.$refs.main.style.top = '15%'; this.$refs.main.style.top = '15%';
this.$refs.main.style.left = (window.innerWidth / 2) - (this.$refs.main.offsetWidth / 2) + 'px'; this.$refs.main.style.left = (window.innerWidth / 2) - (this.$refs.main.offsetWidth / 2) + 'px';