标签：BD% VUE 缩略图 viewer 大图 E6% E7% 81% E8%

1、介绍

用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。

Github  https://github.com/mirari/v-viewer

中文文档地址

　　https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

 2、安装

　　npm install v-viewer

3、引入

　　import 'viewerjs/dist/viewer.css'
　　import Viewer from 'v-viewer'

Vue.use(Viewer)

或者

Vue.use(Viewer, {
    defaultOptions: {
     zIndex: 9999
   }
})

4、使用

<viewer>
  <img :src="scope.row.filePath" style="width: 80px;" alt="">
</viewer>

多个图片

<viewer :images="images">
   <img v-for="src in images" :src="src" :key="src">
</viewer>

Data中

images: ['1.jpg', '2.jpg']

效果

标签：BD%,VUE,缩略图,viewer,大图,E6%,E7%,81%,E8%
来源： https://www.cnblogs.com/qhantime/p/13744965.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。