I used the panzoom in an older vue2 project.
Now I tested it in a simple vue3 setup, I got Unhandled error during execution of mounted hook
at
at
and Cannot create panzoom for the current type of dom element
where's the problem?
my package.json
{
"name": "image-zoom-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-panzoom": "^1.1.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// import vue-panzoom
import panZoom from 'vue-panzoom'
// install plugin
app.use(panZoom);
// createApp(App).mount('#app')
app.mount('#app')
and the vue file
<template>
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- apply to an image -->
<panZoom>
<img src="https://picsum.photos/300">
</panZoom>
<!-- apply to regular dom elements -->
<panZoom>
<p>You can zoom me</p>
</panZoom>
<!-- apply to svg -->
<panZoom selector="#g1">
<svg height="210" width="400">
<g id="g1">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>
</panZoom>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-top: 0px;
margin-left:0px;
background-color: red;
position : fixed;
top: 0px;
left:0px;
width: 1920px;
height: 1080px;
}
</style>
I used the panzoom in an older vue2 project.
Now I tested it in a simple vue3 setup, I got Unhandled error during execution of mounted hook
at
at
and Cannot create panzoom for the current type of dom element
where's the problem?
my package.json
main.js
and the vue file