forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.2 KiB
49 lines
1.2 KiB
<template>
|
|
<view class="container flex flex-row items-center justify-center">
|
|
<image
|
|
class="w-1/2"
|
|
mode="aspectFit"
|
|
src="https://lupic.cdn.bcebos.com/20200412/3026529107_14_800_566.jpg"
|
|
v-finger:pinch="handlePinch"
|
|
v-finger:multipoint-start="handlePinchStart"
|
|
:style="{ transform: `scale(${scale})` }"
|
|
id="image"
|
|
></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
initScale: 1,
|
|
scale: 1,
|
|
element: null,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.element = document.getElementById('image');
|
|
},
|
|
|
|
methods: {
|
|
handlePinchStart() {
|
|
console.log(this.element.style.transform);
|
|
// eslint-disable-next-line no-useless-escape
|
|
const reg = /scale\(([0-9]*[\.]?[0-9]*)\)/gi;
|
|
const scale = this.element.style.transform;
|
|
if (reg.test(scale)) {
|
|
this.initScale = RegExp.$1;
|
|
console.log(this.initScale);
|
|
}
|
|
// this.scale = this.element.scaleX;
|
|
},
|
|
|
|
handlePinch(event) {
|
|
console.log(typeof event.zoom, typeof this.initScale, this.initScale);
|
|
this.scale = this.initScale * event.zoom;
|
|
console.log('this.scale:', this.scale);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|