https://github.com/thecodealer/vue-panzoom
Vue plugin to zoom/pan dom elements
https://github.com/thecodealer/vue-panzoom
pan panzoom vue-component vue-panzoom zoom
Last synced: 5 months ago
JSON representation
Vue plugin to zoom/pan dom elements
- Host: GitHub
- URL: https://github.com/thecodealer/vue-panzoom
- Owner: thecodealer
- License: mit
- Created: 2019-01-13T14:23:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-11T18:50:11.000Z (over 3 years ago)
- Last Synced: 2025-09-24T10:30:03.338Z (9 months ago)
- Topics: pan, panzoom, vue-component, vue-panzoom, zoom
- Language: JavaScript
- Size: 512 KB
- Stars: 95
- Watchers: 2
- Forks: 20
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-panzoom
This is a [Vue.js](https://vuejs.org/) port of [panzoom](https://github.com/anvaka/panzoom), an extensible, mobile friendly pan and zoom framework (supports DOM and SVG).
# Demo
* [Regular DOM object](https://anvaka.github.io/panzoom/demo/dom.html)
* [Standalone page](https://anvaka.github.io/panzoom/demo/index.html) - this repository
* [YASIV](http://www.yasiv.com/#/Search?q=algorithms&category=Books&lang=US) - my hobby project
* [SVG Tiger](https://jsfiddle.net/uwxcmbyg/609/) - 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
You can zoom me
```
## 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
### selector
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](https://github.com/anvaka/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](https://github.com/anvaka/panzoom) events
All events supported by [panzoom](https://github.com/anvaka/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
```