--

src/themes/light/playground.scss

 .zero-playground-body-center{
   position: relative;
   width: 750px;
-  height: 1206px;
+  height: 1624px;
   margin: 10px auto;
   // max-height: 1200px;
   background-color: transparent;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-  overflow-x: hidden;
-  overflow-y: auto;
+  //overflow-x: hidden;
+  //overflow-y: auto;
   /*transform: scale(.5, .5);
   transform-origin: 50% 0%;*/
   //zoom: 0.5;

src/views/Editor/Playground.vue

 <template>
 	<pane icon="el-icon-s-open" class="pane-playground" :title="$t('panes.Playground')">
-		<div class="zero-playground-body-center" :style="playgroundStyle">
+		
+		<div class="draw-body">
+			<div class="playground-con">
+				<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
+				<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
+				<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
+				<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
+			</div>
+
+			<div class="zero-playground-body-center" :style="playgroundStyle" >
 			<!-- <div class="zero-playground-draw-panel"> -->
 				<draw-canvas-panel></draw-canvas-panel>
 			<!-- </div> -->
+			</div>
 		</div>
 	</pane>
 </template>
@@ -18,21 +28,51 @@ export default {
   name: 'Playground',
   components: { Pane, DrawPanel,DrawCanvasPanel},
   props: {
-    zoom:0.5
-  },
-  data:{
-	  
+   
   },
+  
+  data () {
+    return {
+	   zoom:0.5,
+	   hasCtrlState:false
+    }
+	},
   methods: {
     mouseWheel(e){
 		console.log(e)
+		console.log(this.hasCtrlState)
+		if(!this.hasCtrlState){
+			return;
+		}
 		if(e.deltaY>0){
-			this.zoom-=0.1
+			this.setZoom(false)
 		}else if(e.deltaY<0){
-			this.zoom+=0.1
+			this.setZoom(true)
 		}
 		console.log(this.zoom)
-		 events.$emit('setPlaygroundZoom', {zoom:this.zoom});
+		// this.$set(this.zoom, this.zoomj)
+	},
+	setZoom(state){
+		if(state){
+			if(this.zoom>=1.4){
+				this.zoom=1.4
+			}else{
+				this.zoom+=0.05
+			}
+		}else{
+			if(this.zoom<=0.2){
+				this.zoom=0.2
+			}else{
+				this.zoom-=0.05
+			}
+		}
+	//	this.zoom=this.zoom.toFixed(2)
+		events.$emit('setPlaygroundZoom', {zoom:this.zoom});
+
+	},
+	keyDo(state){
+		console.log(state)
+		this.hasCtrlState=state;
 	}
   },
   computed: {
@@ -48,13 +88,46 @@ export default {
   created(){
 	  //alert()
 	  this.zoom=0.5;
+	  
 	   document.body.addEventListener('mousewheel',(e)=>{
 		   this.mouseWheel(e)
 	   },false)
+
+	    document.onkeydown = (e)=>{
+            let key = window.event.keyCode;
+            if (key == 18) {
+                this.keyDo(true);
+            }
+		};
+		document.onkeyup = (e)=>{
+            let key = window.event.keyCode;
+            if (key == 18) {
+                this.keyDo(false);
+            }
+        };
+
 	  
+  },
+  mounted(){
+	events.$emit('setPlaygroundZoom', {zoom:this.zoom});
+	console.log(123)
   }
 };
 </script>
 
 <style scoped>
+</style>
+<style lang="scss">
+.pane-playground{
+	
+}
+.draw-body{
+	width:100%;
+	height: 100%;
+	overflow: auto;
+}
+.playground-con{
+	width: 100%;
+	height: 50px;
+}
 </style>
\ No newline at end of file