LimeUI+1.2.0

主题

LimeBlurView 高斯模糊 ​

  • UTS实现的原生高斯模糊插件，兼容iOS, Android，鸿蒙
  • 在APP环境下使用原生视图实现，在非APP环境下使用CSS的backdrop-filter属性实现
  • 提供了跨平台的一致体验，性能优异

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-blur-view
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-blur-view组件

代码演示 ​

基础使用 ​

可通过blur属性设置模糊值

html
<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>

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

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

插件标签说明 ​

  • 默认 l-blur-view 为组件标签
  • 默认 lime-blur-view 为演示标签

API ​

Props ​

参数说明类型默认值
blur模糊值，值越大模糊效果越强number0
radius圆角半径number0

常见问题 ​

  • 1、安卓不能使用多层组件对背景模糊，存在BUG

源代码 ​

组件源码