更新记录
1.0.0(2020-06-09)
下载此版本
第一个版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
高斯模糊(毛玻璃)
使用方式:
在 script
中引用组件
import helangBlur from "@/components/helang-blur/helang-blur.vue"
export default {
components: {
helangBlur
}
}
在 template
中添加组件
<helang-blur :params="params"></helang-blur>
属性说明:
属性名 |
类型 |
说明 |
params |
Object |
参数,具体描述看下方 params 属性说明 |
params 属性说明:
属性名 |
类型 |
默认值 |
说明 |
width |
String |
0 |
宽度,可支持 px / rpx 单位 |
height |
String |
0 |
高度,可支持 px / rpx 单位 |
image |
String |
'' |
图片地址,无值时为半透明的白色模糊效果 |
blur |
String |
'm' |
模糊度,可选值 xs / s / m / l / xl |
使用示例:
<!-- template -- >
<view>
<helang-blur :params="params"></helang-blur>
</view>
<!-- script -- >
import helangBlur from "@/components/helang-blur/helang-blur.vue"
export default {
components:{
helangBlur
},
data() {
return {
params:{
width:'300px',
height:'200px',
image:"https://mydarling.gitee.io/uniapp-extend/static/images/douyin/4.jpg",
blur:"m"
}
}
}
}
友情提示:
- 当前项目源码使用了 ES6 和 scss 请添加运行依赖
- [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
- [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
- 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载