更新记录

0.0.4（2025-05-21）

• chore: 更新文档说明

0.0.3（2024-12-13）

• chore: hbx4.4.1

0.0.1（2024-11-19）

• init

平台兼容性

uni-app x

lime-blur-view 高斯模糊

• uts 原生高斯模糊插件，兼容uniapp(ios, 安卓)

安装

插件市场导入，在需要的地方使用标签，然后自定义基座再使用

注意 插件内使用了uni.rpx2px,所以得先在页面上使用这个API避免打包错误

代码演示

基础使用

可通过blur属性设置模糊值

<l-blur-view class="blur" :blur="5">
    <text class="text">高斯模糊</text>
</l-blur-view>
<image class="image" mode="widthFix" src="https://img30.360buyimg.com/sku/jfs/t1/226459/37/16721/264461/662dec54F95822c8b/a87d699d4008c0c0.jpg"></image>

    .image {
    width: 100%;
}
.blur {
    position: fixed;
    height: 100px;
    width: 80%;
    top: 10%;
    left: 10%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
}

样式使用

也可以通过css里的backdrop-filter: blur(5px)设置，但这个会在控制台报黄。

<l-blur-view class="blur">
    <text class="text">高斯模糊</text>
</l-blur-view>
<image class="image" mode="widthFix" src="https://img30.360buyimg.com/sku/jfs/t1/226459/37/16721/264461/662dec54F95822c8b/a87d699d4008c0c0.jpg"></image>

    .image {
    width: 100%;
}
.blur {
    position: fixed;
    height: 100px;
    width: 80%;
    top: 10%;
    left: 10%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-blur-view/compoents/lime-blur-view 
<lime-blur-view />

API

Props