hevue-img-preview 僅需傳入url的vue圖片預覽組件

hevue-img-preview 簡介

本組件基於 vue 編寫，僅傳入一個圖片地址，便可實現圖片預覽效果，比較適合給文章及頁面的全部圖片添加預覽效果，預覽背景色，關閉按鈕顏色，控制條的背景也和字體顏色均可自定義，兼容 ie9+，火狐，Safari，谷歌瀏覽器，不過暫不支持多圖預覽。若是能幫上你，但願能夠移步 GitHub github.com/heyongsheng 給個小星星vue

示例預覽

在線文檔git

使用方法

# 安裝
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，或者對象類型的配置，具體使用方法以下github

this.$hevueImgPreview('img.png')web
this.$hevueImgPreview({url: 'img.png'}) 可配置項以下npm

字段	值	備註
url	`http://shiliqingshan.com/web/static/img/logo.1f4d568.png`	圖片地址
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)`	關閉圖標的顏色

做者注

在開發的過程當中，爲了性能和兼容性，其實捨棄了不少東西，例如背景的高斯模糊background-filter, 和字體顏色及背景顏色的漸變。不過爲了知足你們個性化的要求，本插件儘可能的作到了個性化定製，能夠本身搭配出符合項目主題的配色，若是有疑問，請評論瀏覽器