在vue中使用 vieiwer图片预览插件

首先,感谢原作者官网链接open in new window github地址open in new window

项目需求需要做一个图片预览的插件,整体项目是用 vue 构建的,因此,急需要一款适合的插件来完成,找来找去,最终选中 viewerjsopen in new window ,官方有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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

想在全局中使用,总是报错,如果你有相应的解决方案,欢迎在在评论区留言.