<template><div><img src="../../assets/安全协议.png" :alt="alt" @click="open()" style="width: 100%;height: 100%" title="点击查看图片" :id="'vc-imgself-img-'+attach"><div class="full-img" v-if="show"><div @click="on"  draggable="false" ><img src="../../assets/安全协议.png" id="image" alt="" style="width: 100%" class="img-state" :alt="alt || ''"></div><div class="btns"><button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</button></div></div></div>
</template><script>import $ from 'jquery'export default {props: {src: {type: String},width: {default: 60},height: {default: 60},alt: {default: ''},attach: {type: String,default: 'name'}},data () {return {show: false,deg: 0,power: 1}},methods: {open () {this.deg = 0this.power = 0.5this.show = true},close () {this.show = false},on(){$(function (){let result = {}var eleImg = document.querySelector('#image');var store = {scale: 1};// 缩放处理eleImg.addEventListener('touchstart', function (event) {var touches = event.touches;var events = touches[0];var events2 = touches[1];var x = eleImg.offsetLeft;var y = eleImg.offsetTop;if (!events) {return;}event.preventDefault();// 第一个触摸点的坐标store.pageX = events.pageX;store.pageY = events.pageY;store.x = x;store.y = y;store.moveable = true;if (events2) {store.pageX2 = events2.pageX;store.pageY2 = events2.pageY;}store.originScale = store.scale || 1;},{ passive: false });document.addEventListener('touchmove', function (event) {if (!store.moveable) {return;}event.preventDefault();var touches = event.touches;var events = touches[0];var events2 = touches[1];result.textContent = '触摸点数量：' + touches.length;if (events2) {if (!store.pageX2) {store.pageX2 = events2.pageX;}if (!store.pageY2) {store.pageY2 = events2.pageY;}var getDistance = function (start, stop) {return Math.hypot(stop.x - start.x, stop.y - start.y);};var zoom = getDistance({x: events.pageX,y: events.pageY}, {x: events2.pageX,y: events2.pageY}) /getDistance({x: store.pageX,y: store.pageY}, {x: store.pageX2,y: store.pageY2});var newScale = store.originScale * zoom;if (newScale > 4) {newScale = 4;}store.scale = newScale;eleImg.style.transform = 'scale('+ newScale +')';result.textContent = 'zoom: '+ zoom + ', apply scale: ' + newScale;}else{var moveX = events.pageX - store.pageX;var moveY = events.pageY - store.pageY;var imagetop = store.x + moveX;var imageleft = store.y + moveY;$('#image').css({'margin-top':imageleft+'px','left':imagetop+'px'});}},{ passive: false });document.addEventListener('touchend', function () {store.moveable = false;delete store.pageX2;delete store.pageY2;},{ passive: false });document.addEventListener('touchcancel', function () {store.moveable = false;delete store.pageX2;delete store.pageY2;},{ passive: false });});}},ready(){// this.src="../../assets/安全协议.png"}}
</script>
<style media="screen">.full-img {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 20;background: rgba(0,0,0,0.8);display: flex;overflow: auto;flex-direction: column;justify-content: center;align-items: center;color: #fff;}.btns {position: fixed;bottom: 100px;height: auto;}.btns button {margin-right: 20px;}.img-state {}
</style>