vue-panzoom

This is a Vue.js port of panzoom, an extensible, mobile friendly pan and zoom framework (supports DOM and SVG).

Demo

* Regular DOM object
* Standalone page - this repository
* YASIV - my hobby project
* SVG Tiger - js fiddle

Installation

Using npm

``
npm install vue-panzoom --save
`

Using yarn

`
yarn add vue-panzoom
`

Usage

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
` html

`

Changing the component's name

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

`

Attributes

$3

Use this to specify an element within the scope of vue-panzoom component instance, to apply panZoom to. Default is the first root element of the vue-panzoom component. It accepts standard css selector specification.
` 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
``