大佬写的组件 , 虽然我看不懂 但不妨碍我会用啊
想去看大佬代码的点这里
下面的无脑的代码时刻
一、复制代码到一个单独的.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>
二、下载该文件
收钱不是我干的
/download/qq_42877655/12543693
百度云盘下载
链接:/s/1vZjaGASdJWNAxk65T-Gw1A
提取码: dcc2
如果觉得《js 实现 H5 div的内容 放大缩小拖拽功能 vue可用》对你有帮助,请点赞、收藏,并留下你的观点哦!