首先,感謝原作者
官網連結
github地址
專案需求需要做一個圖片預覽的外掛,整體專案是用 vue 構建的,因此,急需要一款適合的外掛來完成,找來找去,最終選中 ,官方有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;
    }

想在全域性中使用,總是報錯,如果你有相應的解決方案,歡迎在在評論區留言.