区域支持放大缩小

通过input输入值，调节画布的大小。

画布或者盒子页面， zoom.vue

<template>
<!-- :style="phoneSize"绑定改box的样式
      缩小放大其实是调节的phoneSize的transform:scale(80), 通过改变 scale(100)调节大小
 -->
    <div class="phone" :style="phoneSize"></div>
</template>
<script>
export default {
    data(){
        return{}
    },
    computed:{
         // 缩放
            phoneSize(){
                let rote = this.$store.state.phoneSize / 100
                return {
                    // zoom: rote,
                    transformOrigin: "center top",
                    transform: `scale(${rote})`,
                }
            },
    }
}
</script>
<style scoped>
.phone{
    width: 400px;
    height: 500px;
    background: indigo;
    margin: 100px auto;
}
</style>

用到vuex，store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    phoneSize: 100, // 页面大小缩放
  },
  mutations: {
    setPhoneSize(state,data){
      state.phoneSize = data.phoneSize
  },
  },
  actions: {
  },
  modules: {
  }
})

第一种效果：在zoomInput.vue页面输入大小，调节画布

<template>
    <div class="canvas-config">
          <span>画布比例</span>
          <input v-model="scale" @input="handleScaleChange"> %
        </div>
</template>
<script>
export default {
    data(){
        return{
            scale: 100,  // 设置画布默认值100
        }
    },
    methods:{
        handleScaleChange(){
        this.$store.commit('setPhoneSize',{phoneSize:this.scale })
    },
    }
}
</script>
<style scoped>
 .canvas-config {
        height: 100%;
        display: inline-block;
        margin-right: 20px;
        font-size: 14px;
        color: #606266;
        display: flex;
        align-items: center;
    }
    input {
            width: 50px;
            margin-left: 10px;
            outline: none;
            padding: 0 5px;
            border: 1px solid #ddd;
            color: #606266;
            font-size: 13px;
        }
        span {
            margin-left: 10px;
        }
</style>

第二种效果：滚动条滑动的效果：zoomInput.vue这样写即可

<template>
  <div
    class="tool-item block"
    style="
      height: 130px;
      height: 130px;
      position: absolute;
      right: 405px;
      bottom: 80px;
    "
  >
    <el-slider
      v-model="phoneSize"
      vertical
      :min="50"
      :step="10"
      :max="150"
      input-size="mini"
      height="100px"
    >
    </el-slider>
  </div>
</template>
<script>
export default {
  computed: {
    phoneSize: {
      get() {
        return this.$store.state.phoneSize
      },
      set(val) {
        let obj = { phoneSize: val }
        this.$store.commit('setPhoneSize', obj)
      },
    },
  },
}
</script>

第三种效果，点击+ - 按钮，输入框数值发生变化，画布进行缩放；

<template>
  <div class="tool-item block" >
      <span style="font-size: 12px">调整<br>尺寸</span>
      <span class="addreduce" @click="addZoom(1)">+</span>
      <div class="inputStyle">
        <input type="text"  style="font-size: 12px;" v-model="phoneSize" />
        <span style="font-size: 12px;">%</span>
      </div>
       <span class="addreduce" @click="addZoom(2)">-</span>
    </div>
</template>
<script>
export default {
data(){
	return{
		phoneSize:100,  // 默认缩放值
}

}
  methods: {
       // 缩小放大
  addZoom(num){
    if(num == 1){
      this.phoneSize=  this.$store.state.phoneSize + 10
      if(this.phoneSize > 140){
        return;
      }
    }
    if(num == 2){
      this.phoneSize=  this.$store.state.phoneSize - 10;
      if(this.phoneSize < 60){
        return;
      }
    }
    let obj = {phoneSize:this.phoneSize}
        this.$store.commit('setPhoneSize',obj)
  }
  },
}
</script>
<style>
	.tool-item{
  position: absolute;
  right: 405px;
  bottom: 80px;
  width: 46px;
  height: 160px;
  background: rgba(0,0,0,0.80);
  border-radius: 40px;
  color: #FFFFFF;
  opacity: 0.9;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  .addreduce{
    font-size: 22px;
    font-weight:bold; 
  }
  .inputStyle{
    display: flex;
    justify-content: center;
    align-items: center;
    uni-input{
          width: 24px
    }
  }
}
</style>