https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0

首先,感谢原作者
官网链接
github地址
项目需求需要做一个图片预览的插件,整体项目是用 vue 构建的,因此,急需要一款适合的插件来完成,找来找去,最终选中 viewerjs ,官方有demo,但是在vue中用使用的文档却没有,经过尝试,通过以下方式来实现 :
我的需求是局部组件中实现图片预览,流程如下:

1 构建插件需要的 DOM:

 <div id="galley">
<ul class="pictures">
<li>
<img src="../assets/test_book1.jpg"
alt="Cuo Na Lake">
</li>
<li>
<img src="../assets/test_book2.jpg"
alt="Tibetan Plateau">
</li>
<li>
<img src="../assets/test_book3.jpg"
alt="Jokhang Temple">
</li>
<li>
<img src="../assets/test_book4.jpg"
alt="Potala Palace 1">
</li>
<li>
<img src="../assets/test_book5.jpg"
alt="Potala Palace 2">
</li>
<li>
<img src="../assets/test_book6.jpg"
alt="Potala Palace 3">
</li>
<li>
<img src="../assets/test_book7.jpg"
alt="Lhasa River">
</li>
<li>
<img src="../assets/test_book8.jpg"
alt="Namtso 1">
</li>
<li>
<img src="../assets/test_book9.jpg"
alt="Namtso 2">
</li>
</ul>
</div>

  

  • 2 首先通过 npm install viewerjs来安装依赖包,

  • 3 然后在组件的 script 中引入viewerjs 和相关样式文件,并在生命周前函数 mounted 中new Viewer方法:

  • <script>
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css'; export default { name: 'BookDetails',
    data () {
    return {}
    },
    mounted () {
    var galley = document.getElementById('galley');
    var viewer = new Viewer(galley, {
    // 相关配置项,详情参考官网
    });
    },
    methods: {}
    }
    </script>

      

    • 4 根据需求,修改自定义样式 ,自定义样式是指还没有点击图片开始预览时的图片样式 :
    • pictures {
      width: 100%;
      height: 75vh;
      background: #cccccc;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow: auto;
      } .pictures li {
      /*float: left;*/
      margin: 10px;
      border: 1px solid #000;
      -webkit-box-shadow: 5px 5px 5px #000;
      -moz-box-shadow: 5px 5px 5px #000;
      box-shadow: 5px 5px 5px #000; } .pictures li img {
      height: 200px;
      }

        

最新文章

  1. [LeetCode] Min Stack 最小栈
  2. python urllib
  3. HDU5800 To My Girlfriend(DP)
  4. iOS根据Url 获取图片尺寸
  5. IIS8托管WCF服务
  6. Nico Game Studio 1.基本UI和地图编辑基础功能
  7. nutch fetcher.server.delay
  8. poj 2777Count Color
  9. Debian安装JAVA环境(转载)
  10. [LeetCode]题解(python):028-Implement strStr()
  11. Android Apk获取包名和Activity名称
  12. Foreign websites
  13. PLSQL配置怎么连ORACLE
  14. 通过ClickOnce本地打包发布WPF应用程序
  15. 29.html5 移动端开发总结
  16. ArcGIS API 和GIServer
  17. Number of Islands I &amp; II
  18. tornado多路由示例
  19. 公共cdn的js和css库
  20. java学习笔记6--类的继承、Object类

热门文章

  1. spring核心框架体系结构
  2. webservice报错Message part refundRequest was not recognized. (Does it exist in service WSDL?)
  3. java web dao 层和dao 实现层有什么好处
  4. openCV的基本操作
  5. 《zw版&#183;ddelphi与halcon系列原创教程》Halcon的短板与delphi
  6. 原来DataTable的Distinct竟如此简单!
  7. pxecfg&amp;kickstart生成脚本
  8. Mac system快捷键
  9. 软件测试-nextDate问题
  10. Spring + Spring MVC + Hibernate项目开发集成(注解)
  11. Android PopupWindow菜单
  12. JavaScript高级程序设计---学习笔记(四)
  13. qrcode生成二维码插件
  14. 201521123054《JAVA程序设计》第三周学习总结
  15. Uncaught TypeError: download is not a function at HTMLAnchorElement.onclick (index.html:25)
  16. var 在异步中引发的 bug
  17. 【LOJ#3095】[SNOI2019]字符串(后缀数组)
  18. volatile分析
  19. Codeforces1113F. Sasha and Interesting Fact from Graph Theory(组合数学 计数 广义Cayley定理)
  20. Linux下网卡绑定模式