Vue实现div滚轮放大缩小

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

Vue实现div滚轮放大缩小_第1张图片

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配置项和handleTableWheeltableZoom方法即可。





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

你可能感兴趣的