vue項目 PC端點擊查看大圖

今天,發現了一款還不錯的插件來實現查看大圖,成熟度也比較高,支持各種操作

 

原作品的github地址為 https://github.com/mirari/v-viewer 

也有對應的中文文檔,使用方法很詳細,支持各種方式調用  https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

 

 

我目前使用的是組件內引用的方式

 

1.安裝配置依賴

npm install v-viewer --save

2.在main.js中引入

 

也有各種參數,但還未深入理解其作用

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    inline: false,
    button: true,
    navbar: false,
    title: false,
    toolbar: true,
    tooltip: false,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: false,
    transition: true,
    fullscreen: false,
    keyboard: false
  }
})

3.單圖片使用

      <viewer>
          <img src="../assets/1.jpg" alt="">
        </viewer>

 

 

效果

 

 

 

4.多圖片使用

<viewer :images="images">
      <div style="display: flex;">
	      <img v-for="src in images" :key="src.url"  :src="src.url" width="300">
      </div>
</viewer>

　　

效果

 

 

 

參考鏈接:

1.https://blog.csdn.net/yp090416/article/details/81486581

2.https://www.cnblogs.com/secretAngel/p/10287796.html

3.https://github.com/mirari/v-viewer