58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div id="menu-wrap">
|
|
<Sidebar ref="sidebar" @loadImage="loadImage" @guideSize="guideSize"/>
|
|
</div>
|
|
<div id="canvas-wrap">
|
|
<Canvas ref="canvas" @imageLoaded="updateImageSize"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Canvas from './components/Canvas'
|
|
import Sidebar from './components/Sidebar'
|
|
|
|
export default {
|
|
name: 'app',
|
|
components: {
|
|
Canvas, Sidebar
|
|
},
|
|
methods: {
|
|
loadImage: function (url) {
|
|
this.$refs.canvas.imageUrl = url
|
|
},
|
|
guideSize: function (size) {
|
|
this.$refs.canvas.slice = size
|
|
},
|
|
updateImageSize: function (size) {
|
|
this.$refs.sidebar.imageSize = size
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html, body, #app {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#menu-wrap, #canvas-wrap {
|
|
display: inline-block;
|
|
}
|
|
|
|
#menu-wrap {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
#canvas-wrap {
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
</style>
|