LimeUI+1.0.0

主题

LimeBlurView 高斯模糊 ​

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

安装 ​

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

代码演示 ​

基础使用 ​

可通过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>
css
	.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)设置，但这个会在控制台报黄。

html
<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>
css
	.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;
}

查看示例 ​

  • 导入后直接使用这个标签查看演示效果
html
 // 代码位于 uni_modules/lime-blur-view/compoents/lime-blur-view 
<lime-blur-view />

API ​

Props ​

参数说明类型默认值
blur模糊值number``
radius圆角number``

源代码 ​

组件源码