vue 项目引入 v-viewer ,图片点击预览以及移动等功能

1.相关的demo官网上可以看到, 这里附上地址: https://mirari.cc/v-viewer/

正文:

  1. 先下载依赖:          npm install v-viewer --save

  2. 在全局进行配置, main.js里面
  3. import Vue from 'vue';
    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    Vue.use(Viewer)
    Viewer.setDefaults({
      Options: { 
                  'inline': true, 
                  'button': true, 
                  'navbar': true, 
                  'title': true,
                  'toolbar': true, 
                  'tooltip': true, 
                  'movable': true, 
                 'zoomable': true,
                 'rotatable': true, 
                 'scalable': true, 
               'transition': true, 
                'fullscreen': true,
                 'keyboard': true, 
               'url': 'data-source' 
      }
    })
    

 3.在相关的页面使用

<viewer :images="photo"> 
    <img
         v-for="(src,index) in photo"
         :src="src"
         :key="index"
         :onerror="errorImg"
    >
//photo为数组
</viewer>

  最后 , 建议封装组件。

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读