1

2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,109 @@
+<template>
+		
+		<view :id="uid" style="min-height: 5px;min-width: 5px;">
+			<slot v-if="props.into == 'self'" ></slot>
+			<view v-if="props.into == 'self'"  class="xdBlurSelf" :id="uidself" ></view>
+			<!-- #ifdef APP -->
+			<native-view @init="onviewinit" v-else :style="`background-color: ${bgColor};width:100%;height:100%;min-height: 5px;min-width: 5px;`"></native-view>
+			<!-- #endif -->
+			<!-- #ifdef APP-HARMONY -->
+			<native-view @init="onviewinit" v-if="props.into == 'self'" style="width:100%;height:100%;min-height: 5px;min-width: 5px;"></native-view>
+			<!-- #endif -->
+		</view>
+		
+</template>
+
+<script setup lang="uts">
+	import { xdBlur } from '@/uni_modules/x-design';
+	let xdblur : xdBlur | null = null
+
+	let uid = 'xdblur' + Math.random().toString(16).substring(4, 20)
+	let uidself = 'xdblurself' + Math.random().toString(16).substring(4, 20)
+	const props = defineProps({
+		/**
+		 * 模糊程度0-100
+		 */
+		blur: {
+			type: Number,
+			default: 100
+		},
+		/**
+		 * 背景颜色建议rgba,让a有透明度,这样
+		 * 更适合磨砂效果,推荐blur=90,a=0.9,具体请自行设置
+		 * 如果要适应暗黑,请自行在外部判断isDark来切换暗黑背景.
+		 */
+		bgColor: {
+			type: String,
+			default: 'rgba(255,255,255,0.8)'
+		},
+		/**
+		 * 模糊对象
+		 * parent,模糊它的父级(即背景),self:模糊自己本身内容
+		 */
+		into: {
+			type: String,
+			default: "parent"
+		}
+	})
+	let tid = 12
+	const bgColor = computed(():string => props.bgColor)
+	const setBgBlur = ():Promise<boolean> => {
+		return new Promise((res)=>{
+			let ele = uni.getElementById(uid) as UniElement | null;
+			let ele2 = uni.getElementById(uidself) as UniElement | null;
+			if (ele != null) {
+				let blur = props.blur;
+				if (props.into == 'parent') {
+					xdblur?.setFilterBg(blur as number, props.bgColor,ele)
+				} else if (ele2 != null&&props.into != 'parent') {
+					
+					// #ifdef APP-ANDROID||APP-IOS
+					xdBlur.setFilterSelfBg(ele, ele2, blur as number, props.bgColor)
+					// #endif
+					// #ifdef APP-HARMONY
+					xdblur?.setFilterSelfBg(ele, ele2, blur as number, props.bgColor)
+					// #endif
+				}
+			}
+			res(true)
+		})
+	}
+
+	watch(() : any[] => [props.blur, props.bgColor], () => {
+		setBgBlur()
+	})
+	function onviewinit(e : UniNativeViewInitEvent) {
+		xdblur = new xdBlur(e.detail.element);
+		tid = setTimeout(function () {
+			setBgBlur()
+		}, 50);
+	}
+
+	onMounted(() => {
+		
+		// #ifndef APP
+		xdblur = new xdBlur(null);
+		setBgBlur()
+		// #endif
+
+	})
+	// #ifdef APP
+	onPageScroll((ops : OnPageScrollOptions) => {
+		clearTimeout(tid)
+		tid = setTimeout(function () {
+			setBgBlur()
+		}, 5);
+	})
+	// #endif
+</script>
+
+<style>
+	.xdBlurSelf {
+		pointer-events: none;
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		width: 100%;
+		height: 100%;
+	}
+</style>