Vue plugin to zoom/pan dom elements
npm install vue-panzoomThis is a Vue.js port of panzoom, an extensible, mobile friendly pan and zoom framework (supports DOM and SVG).
* Regular DOM object
* Standalone page - this repository
* YASIV - my hobby project
* SVG Tiger - js fiddle
Using npm
```
npm install vue-panzoom --save
Using yarn
``
yarn add vue-panzoom
main.js
` js
// import Vuejs
import Vue from 'vue'
import App from './App.vue'
// import vue-panzoom
import panZoom from 'vue-panzoom'
// install plugin
Vue.use(panZoom);
new Vue({
render: h => h(App),
}).$mount('#app')
`
App.vue You can zoom me
` html`
If you wish to change the name of the vue component from the default panZoom, you pass an option to the plugin like so:
` js`
Vue.use(panZoom, {componentName: 'yourPanZoom'});
and then use in your vue template like so:
` html`
html
I cannot be zoomed and panned
I can be zoomed and panned
`Options
The options prop is used to define panzoom options. All panzoom options are supported
` html
`Events
You can listen to specific events in the lifecycle of a vue-panzoom instance. For example, in the code below the function onPanStart will be called when pan begins
` html
`Another way to listen to events within the init event's callback, when you know for sure everything is ready and the panzoom instance is available. For example
` html
`
` js
onInit: function(panzoomInstance, id) {
panzoomInstance.on('panstart', function(e){
console.log(e);
});
}
`init event
This event is fired when the vue-panzoom instance has been initialized successfully. For example:
` html
`panzoom events
All events supported by panzoom are also supported here.upgrading from 1.1.3 to 1.1.4
Version 1.1.4 uses "rollup-plugin-vue": "^6.0.0", which requires Vue 3. For projects using Vue 2, downgrade to 1.1.3, e.g.:
`sh
npm install vue-panzoom@1.1.3
``