Vue实现div滚轮放大缩小 Vue实现div滚轮放大缩小

Vue项目中实现div滚轮放大缩小，拖拽效果，类似画布效果

文章图片

1、引入插件vue-draggable-resizable，点我进入GitHub地址。

【Vue实现div滚轮放大缩小】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// iviewimport 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方法即可。

.is {.table {.name {cursor: pointer; }}}// iview表格样式：iview官网复制就行,无关紧要/deep/ .ivu-table {.demo-table-info-row td {background-color: #2db7f5; color: #fff; }td.demo-table-info-column {background-color: #2db7f5; color: #fff; }.demo-table-error-row td {background-color: #ff6600; color: #fff; }.demo-table-info-cell-name {background-color: #2db7f5; color: #fff; }.demo-table-info-cell-age {background-color: #ff6600; color: #fff; }.demo-table-info-cell-address {background-color: #187; color: #fff; }}// 去除画布中div边框.vdr {border: none; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。