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, 和字体颜色及背景颜色的渐变。不过为了知足你们个性化的要求，本插件尽可能的作到了个性化定制，能够本身搭配出符合项目主题的配色，若是有疑问，请评论浏览器