极客观点
项目管理
HarmonyOS
不是@panzoom/panzoom
是anvaka/panzoom https://github.com/anvaka/pan...
鼠标滚动是可以缩放的，但是还需要一个设置值进行缩放
或者说如何重置为初始状态，我就可以先重置再设置了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
header {background: #caccd1;}
</style>
</head>
<body>
<div id="container">
<div>
<header>
缩放比例倍数：
<select v-model="multiple" @change="setMultiple">
<option value="0.5">50%</option>
<option value="1">100%</option>
<option value="2">200%</option>
<option value="3">500%</option>
</select>
</header>
<div class="grid" id="mainContainer">
<div v-for="item in list">
{{ item }}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"></script>
<script type="text/javascript">
new Vue({
data: () => {
return {
multiple: 1,
pan: null,
list: [1,2,3,4,5,6,7,8,9]
}
},
mounted() {
const mainContainer = document.getElementById('mainContainer')
this.pan = panzoom(mainContainer, {
smoothScroll: false,
bounds: true,
zoomDoubleClickSpeed: 1,
//设置滚动缩放的组合键，默认不需要组合键
beforeWheel: (e) => {
return false // 是否禁止缩放
},
beforeMouseDown: function (e) {
const shouldIgnore = e.ctrlKey
return shouldIgnore
},
})
},
methods: {
// 设置倍数
setMultiple () {
// 这么写感觉不对，多点几次就发现缩小是基于当前大小缩小,而不是默认比例缩小
this.pan.zoomTo(0, 0, this.multiple)
// console.log(this.multiple)
}
}
}).$mount('#container')
</script>
</body>
</html>
html5
看着官网是这样说的