63 lines
978 B
Vue
63 lines
978 B
Vue
<template>
|
|
<div id="app">
|
|
<div id="menu-wrap">
|
|
<Sidebar ref="sidebar" @loadImage="loadImage" @guideSize="guideSize"/>
|
|
</div>
|
|
<div id="canvas-wrap">
|
|
<Canvas ref="canvas"/>
|
|
</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;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
html, body, #app {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 0;
|
|
margin: 0;
|
|
|
|
font-family: Consolas, Inconsolata, monospace, serif;
|
|
line-height: .97em;
|
|
font-size: .95em;
|
|
}
|
|
|
|
input {
|
|
font-size: .95em;
|
|
}
|
|
|
|
#menu-wrap, #canvas-wrap {
|
|
display: inline-block;
|
|
}
|
|
|
|
#menu-wrap {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
#canvas-wrap {
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
</style>
|