hevue-img-preview 仅需传入url的vue图片预览组件
2020/4/27 11:03:58
本文主要是介绍hevue-img-preview 仅需传入url的vue图片预览组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
hevue-img-preview 简介
本组件基于 vue 编写,仅传入一个图片地址,即可实现图片预览效果,比较适合给文章及页面的所有图片添加预览效果,预览背景色,关闭按钮颜色,控制条的背景也和字体颜色都可自定义,兼容 ie9+,火狐,Safari,谷歌浏览器,不过暂不支持多图预览。如果能帮上你,希望可以移步 GitHub github.com/heyongsheng 给个小星星
示例预览
在线预览网址 heyongsheng.github.io/#/
使用方法
# 安装 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('img.png')
-
this.$hevueImgPreview({url: 'img.png'})
可配置项如下
字段 | 值 | 备注 |
---|---|---|
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
, 和字体颜色及背景颜色的渐变。不过为了满足大家个性化的要求,本插件尽量的做到了个性化定制,可以自己搭配出符合项目主题的配色,如果有疑问,也可以用以下方式和作者联系
添加请备注掘金
作者QQ:1378431028
QQ群:595472617
作者微信:heyongsheng1996
这篇关于hevue-img-preview 仅需传入url的vue图片预览组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南