原生js 基于vue的语法 图片的放大缩小

原生js 基于vue的语法 图片的放大缩小

话不多说，直接上代码

<template>
    <div class="screen_img" tabindex="1" @keyup="handleEsc">
        <div class="screen_img_wapper">
            <!--      <canvas id="canvas" width="860" height="860" :style="`transform: rotate(${canvasRotate}deg);`"></canvas>-->
            <img
                id="mainImage"
                :src="imgSource"
                :style="imgTransform"
                alt=""
            >
            <i class="screen_close icon_close" @click="smallImg($event)"></i>
            <div class="screen_rotate">
                <i class="left" @click="rotate -= 90"></i>
                <i class="right" @click="rotate += 90"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
   
        props: ['bigImgData'],//img url string 
        data() {
   
            return {
   
                canvasRotate: 0,
                translate: [], // transform translate
                scale: 1, // transform scale
                rotate: 0,
                imgSource: ''
            };
        },
        computed: {
   
            // 图片transform属性
            imgTransform() {
   
                let translate = `translate3d(${
     this.translate[0