search

mirari / v-viewer

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
https://mirari.cc/v-viewer/
MIT License
2.46k stars 292 forks source link

vue中 使用component 怎么监听图片移动以及缩放 #324

Closed xd15332538931 closed 1 month ago

xd15332538931 commented 4 months ago 
<viewer
    :images="images"
    :options="options"
    class="viewer"
    ref="viewer"
    @move="moveFun"
    v-if="images && images.length"
    style="width: 500px;height: 670px;"
  >
    <img
      v-for="{source, thumbnail} in images"
      :src="thumbnail"
      :data-source="source"
      :key="source"
      class="image"
    >
  </viewer>

  methods:{
        moveFun(event){
        console.log('移动',event)
    },
  }
  vue2中我这样绑定 移动图片触发的事件 移动图片时 moveFun函数没有 执行 
  我想监听 图片放大 缩小 执行一些逻辑 如何绑定相关事件呢
mirari commented 4 months ago

这些事件是从dom元素上发起的，不是viewer组件的自定义事件。使用组件形式时，需要加上.native后缀

@move.native="onMove"
xd15332538931 commented 4 months ago

我设置了@move.native="onMove" 还是没有执行 没作用

mirari commented 4 months ago

https://codepen.io/mirari/pen/gOyKzya

参考这个例子

xd15332538931 commented 4 months ago

使用你那个例子可以 但是在我的系统里面就不起作用

mirari commented 4 months ago

那就需要你提供一个最简复现案例了

使用组件的问题已经解决了？那我关闭上一个issue了

xd15332538931 commented 4 months ago

使用组件的那个一直都是提示那个报错 组件未引入 import Vue from "vue"; import Viewer from "v-viewer"; import "viewerjs/dist/viewer.css"; Vue.use(Viewer); 我只有使用这样的方式才能使用