更新记录

1.0.0(2020-06-09)

第一个版本


平台兼容性

Vue2 Vue3
×
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"
                }
            }
        }
    }

友情提示:

  1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
  2. [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
  3. [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
  4. 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问