search

jarvisniu / vue-zoomer

Zoom the image or other thing with mouse or touch
MIT License
150 stars 37 forks source link

Emit is not declared #25

Closed schmeiger closed 3 years ago

schmeiger commented 3 years ago

Hey,

I was really happy to find your component to use in my project, but I faced two issues. First of one is that there is no emits declared in your code... That's why in Vue 3 it constantly screams with a warning

image

https://v3.vuejs.org/guide/migration/emits-option.html#_2-x-behavior

Secondly, I really don't understand how I can use zoomIn and zoomOut methods or some other similar behaviour, where I could detect that the image was zoomed in.

Is there any chance that you provide some little demo for single image use? Like here, but that your JS code would be visible? https://unpkg.com/vue-zoomer@0.3.9/dist/demo/basic.html

Thank you, in advance! :)

schmeiger commented 3 years ago

Ah yeah, I'm most interested in this prop here and what do you mean with sync... Any example how it will look like in code?

image

schmeiger commented 3 years ago

Hey,

I've figured it out, why it was not working with .sync...

https://v3.vuejs.org/guide/migration/v-model.html#overview

So I've changed :zoomed.sync to v-model. And it works: `

`

The only thing that is missing now in your module is emits declaration: emits: ['update:zoomed'],

One will get rid of the nasty vue warnings... :) Hope for this update soon ;)

schmeiger commented 3 years ago

Oh... by using v-model... I've lost @click="$refs.zoomer.zoomIn()" zoomIn/zoomOut functionality... why is that? Some hewp? :)

jarvisniu commented 3 years ago

It seems that you are using Vue 3, but the stable version is for Vue 2.

Make sure you have install the Vue 3 version by npm install vue-zoomer@next firstly.

Docs here: https://github.com/jarvisniu/vue-zoomer/tree/next