原生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