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.49k stars 294 forks source link

如何通过js修改当前展示的图片索引? #258

Closed AoHongJie closed 2 years ago

AoHongJie commented 2 years ago

比如我更换了imgList, viewer重新加载了数据,现在像使用js展示更换的imgList第n张图该怎么实现呢?

mirari commented 2 years ago

取到viewer对象后执行view(index)方法

AoHongJie commented 2 years ago

跟新了images数组渲染viewer之后,viewer实例是否发生了改变? 在inited中将获取的viewer实例是不是和新的不一样,执行viewer的view(index)方法不生效

AoHongJie commented 2 years ago

写了个domehttps://codepen.io/aohongjie/pen/wvjwmzx,在更新images时viewer实例还是原来的实例,所以还是显示的原来的图片,该怎么在images改变时获取到新的viewer实例呢?

mirari commented 2 years ago

组件使用时可以监听inited回调,在回调中执行view方法 指令使用时暂时没有精确方式拿到回调 但是可以通过修改options的initialViewIndex值,来实现刷新后默认打开指定图片。这个方法要配合rebuild配置项使用,默认viewer自带的update行为不会获取initialViewIndex。

mirari commented 2 years ago
 add () {
      this.images.push(sourceImages[this.images.length])
      this.options.initialViewIndex++
    },
 <div v-viewer.rebuild="options" class="images" ref="viewer">
AoHongJie commented 2 years ago

解决了,谢谢大佬