关于vue2-viewer图片查看器在火狐兼容性问题

最近在在写项目时遇到了一些关于vue2-viewer图片查看器相关的游览器兼容性问题,vue2-viewer在谷歌浏览器使用非常良好,但当在火狐浏览器时频繁点击图片会出现新窗口,并且插件的拖拽的效果失效.

下面是vue2-viewer的组件

<vue-viewer
      style="display: inline-block"
      :thumb="fleetInfo.charterImage"
      :full="fleetInfo.charterImage"
      class="checkImg"
        >
 </vue-viewer>

此插件在谷歌浏览器展示还是的但到了火狐浏览器就会出现很多兼容性问题

解决方法

使用v-viewer图片查看器

安装

npm install v-viewer --save

引入

//图片查看器
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//注册图片查看器
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

组件

<!-- :images里里必须存放数组,不然会报错,这里因为本人并没有图片列表所以直接给空了 -->
     <viewer :images="[]"  > 
        <div  class="imgdiv"    style="text-align: center;">
          <img
              :src="fleetInfo.charterImage"
              width="200"
          />
        </div>
     </viewer

相关api 配置

当然如果你不想以添加dom的方式让图片进行放大还可以使用这个hevue-img-preview插件