使用 vue-panzoom 组件时 vue3 未处理的错误

Question

I used the panzoom in an older vue2 project.

Now I tested the component in a simple vue3 setup and 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>

Answer 1

app id is mounted in main.js using app.mount('#app')

But Div with id app is missing in the vue file.

Vue file will look like following

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

       <!--missing div! -->
       <div id="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>
       </div>
</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>

You can refer to official documentation of panzoom usage.