这篇文章主要为大家详细介绍了Vue实现div滚轮放大缩小，拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue项目中实现div滚轮放大缩小，拖拽效果，类似画布效果
1、引入插件vue-draggable-resizable，点我进入GitHub地址。
1）、npm install --save vue-draggable-resizable
2）、main.js文件中
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
3）、vue文件中使用
main.js：
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false // iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI) // 拖拽・缩放・画布插件 import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' Vue.component('vue-draggable-resizable', VueDraggableResizable) new Vue({ el: '#app', router, components: { App }, template: 'vue文件： 只需要关注引入组件vue-draggable-resizable配置项和handleTableWheel、tableZoom方法即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是Vue实现div滚轮放大缩小的详细内容，更多请关注0133技术站其它相关文章！
