js 实现 H5 div的内容 放大缩小拖拽功能 vue可用

大佬写的组件 ， 虽然我看不懂 但不妨碍我会用啊
想去看大佬代码的点这里

下面的无脑的代码时刻

一、复制代码到一个单独的.vue文件然后 走人去下一步

// 放大缩小页面组件
<template>
  <div class="resizeMain">
    <div class="page pinch-zoom-parent">
        <div class="pinch-zoom">
            <div class="description">
                <h1>Pinchzoom.js</h1>
                <p>
                    Multi-touch zoom in Javascript
                </p>
            </div>
            <img src="../../img/me.png">
        </div>
    </div>

  </div>
</template>
<script>
import { defaultI } from "@/js/pinch-zoom.umd.js"
export default {
  name:"resizeMain", 
  components:{
  },
  data() {
    return {
    }
  },
    // 渲染之后
  mounted:function () {
    setTimeout(() => {
          var el = document.querySelector('div.pinch-zoom');
          new defaultI(el, {});
    }, 500);
    // document.getElementById("text123").οnclick=function(){
    //   console.log('点击图标');
    // }
    // this.OnHuaLu()
  },
  created:function () {
  },
 
  methods:{
  
  }
}
</script>
<style lang="scss">
.resizeMain{
  body, html {
    text-align: center;
    color: white;
  }

  body {
    background-color: #333;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  }

  div.page {
    max-width: 100vw;
    text-align: left;
  }

  .pinch-zoom-parent {
    height: 80vh;
    width: 90vw;
  }

  img {
    height: 90vh;
  }

  div.pinch-zoom div.description h1 {
    font-size: 40px;
    margin: 0px;
    margin-bottom: 10px;
  }

  div.pinch-zoom div.description p {
    margin-bottom: 1em;
  }

  ul {
    margin: 0;
    padding: 0;
  }

}
</style>

二、下载该文件
收钱不是我干的
https://download.csdn.net/download/qq_42877655/12543693

百度云盘下载
链接: https://pan.baidu.com/s/1vZjaGASdJWNAxk65T-Gw1A 提取码: dcc2