标签:实现 class flex net 官方 cccccc bsp get oat
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>
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; }
标签:实现 class flex net 官方 cccccc bsp get oat
原文地址:https://www.cnblogs.com/qianjin888/p/9848920.html