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>
  

  　　

  • 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;
        }
    

    　　

在 vue 中使用 vieiwer 圖片預覽插件