个人博客迁移到biubu.cn,此处停更.请移步。
首先,感谢原作者
官网链接
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;
}
想在全局中使用,总是报错,如果你有相应的解决方案,欢迎在在评论区留言.
