前人鋪路系列組件之hevue-img-preview，一款傳入地址支持單圖多圖預覽的vue圖片預覽組件

hevue-img-preview 簡介

❝

本組件是一個基於 vue 編寫的 vue 圖片預覽組件，支持 pc 和手機端，支持單圖和多圖預覽，僅傳入一個圖片地址，便可實現圖片預覽效果。手機端支持單指拖拽和雙指縮放。頁面各組件顏色都可可自定義，實現個性化設計。若是能幫上你，但願能夠移步 GitHub ，或者碼雲 給個小星星，若是有任何使用意見或建議，也歡迎回復或者提交issure

❞

示例預覽

在線文檔

安裝

# 安裝
npm install hevue-img-preview --save  # main.js 引入 import hevueImgPreview from 'hevue-img-preview' Vue.use(hevueImgPreview)  # 使用 給任意對象添加任意事件，例如 <img :src="src" @click="previewImg(url)"> 便可在事件裏調用方法進行預覽 methods: {  previewImg (url) {  this.$hevueImgPreview(url)  } }  複製代碼

使用

❝

this.$hevueImgPreview() 方法能夠接收一個字符串類型的 url，或者對象類型的配置，具體使用方法以下

❞

• 接收一個地址字符串this.$hevueImgPreview(url)

this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 線上地址
this.$hevueImgPreview('./img/logo.jpeg') // 本地地址 複製代碼

• 接收一個對象this.$hevueImgPreview(options)

# 單圖預覽
this.$hevueImgPreview({  url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',  mainBackground: 'rgba(0, 0, 0, .5)', // 總體背景顏色 })  # 多圖預覽 this.$hevueImgPreview({  multiple: true, // 開啓多圖預覽模式  nowImgIndex: 1, // 多圖預覽，默認展現第二張圖片  imgList: ['1.png', '2.png', '3.png'], // 須要預覽的多圖數組  mainBackground: 'rgba(0, 0, 0, .5)', // 總體背景顏色 }) 複製代碼

具體可配置項以下

字段	值	備註
url	圖片的本地或者線上地址，多圖預覽時可不傳	預覽的圖片地址，多圖預覽時省略
mainBackground	#fff 或者 rgba(255,255,255,.1)	總體背景顏色（可選）
controlColor	#fff 或者 rgba(255,255,255,.1)	控制條字體顏色（可選）
controlBackground	#fff 或者 rgba(255,255,255,.1)	控制條背景顏色 （可選）
closeColor	#fff 或者 rgba(255,255,255,.1)	關閉圖標的顏色 （可選）
multiple	布爾值 true/false	是否多圖預覽
nowImgIndex	Number格式，如默認展現第二張，傳入1	多圖預覽時默認顯示的圖片下標
imgList	Array格式 [url1, url2, url3]	多圖預覽時傳入的數組
keyboard	布爾值 true/false	是否開啓鍵盤控制
clickMaskCLose	字符串 open/close	是否開啓點擊遮罩層關閉，默認爲開啓

如開啓鍵盤控制事件後，相對應功能控制按鍵以下

按鍵	功能
w	放大
s	縮小
a	上一張
d	下一張
q	逆時針旋轉
e	順時針旋轉
r	圖片復位
esc	關閉圖片預覽

*如不考慮兼容性問題，上述的背景顏色都可接收漸變色

做者注

❝

本人前端小白一枚，工做經驗較少，所寫東西儘可能保證沒bug，但性能界面什麼的可能沒辦法作到最優，若是您有什麼使用中的建議或意見，歡迎反饋給我，能夠加聯繫方式，也能夠直接回復，或者到GitHub提個issur[建議此方法]，若是對您有所幫助，萬分期待您能給個贊而且到GitHub給個小星星，您的支持是我前進的最大動力。

❞

❝

GitHub連接：github.com/heyongsheng…

❞

❝

碼雲連接：gitee.com/ihope_top/h…

❞