add: up-overlay/up-popup/up-safe-area支持uni-app-x

src/uni_modules/uview-plus/components/up-overlay/overlay.uts

@@ -0,0 +1,18 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-09-12 01:06:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 01:06:21
+ * @FilePath     : /uview-plus/libs/config/props/overlay
+ */
+export default {
+    // overlay组件
+    overlay: {
+        show: false,
+        zIndex: 10070,
+        duration: 300,
+        opacity: 0.5
+    }
+} as UTSJSONObject

src/uni_modules/uview-plus/components/up-overlay/props.uts

@@ -0,0 +1,28 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './overlay'
+let crtProp = defProps['overlay'] as UTSJSONObject
+
+export const propsOverlay = defineMixin({
+    props: {
+        // 是否显示遮罩
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: crtProp['zIndex']
+        },
+        // 遮罩的过渡时间，单位为ms
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // 不透明度值，当做rgba的第四个参数
+        opacity: {
+            type: [String, Number],
+            default: crtProp['opacity']
+        }
+    }
+})

src/uni_modules/uview-plus/components/up-overlay/up-overlay.uvue

@@ -0,0 +1,71 @@
+<template>
+	<up-transition
+	    :show="show"
+	    custom-class="up-overlay"
+	    :duration="duration"
+	    :custom-style="overlayStyle"
+	    @click="clickHandler"
+	>
+		<slot />
+	</up-transition>
+</template>
+
+<script>
+	import { propsOverlay } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <up-overlay :show="show" @click="show = false"></up-overlay>
+	 */
+	export default {
+		name: "up-overlay",
+		mixins: [mpMixin, mixin, propsOverlay],
+		computed: {
+			overlayStyle(): any {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		emits: ["click"],
+		methods: {
+			clickHandler(): void {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+     $up-overlay-top:0 !default;
+     $up-overlay-left:0 !default;
+     $up-overlay-width:100% !default;
+     $up-overlay-height:100% !default;
+     $up-overlay-background-color:rgba(0, 0, 0, .7) !default;
+	.up-overlay {
+		position: fixed;
+		top:$up-overlay-top;
+		left:$up-overlay-left;
+		width: $up-overlay-width;
+		height:$up-overlay-height;
+		background-color:$up-overlay-background-color;
+	}
+</style>

src/uni_modules/uview-plus/components/up-overlay/up-overlay.vue

@@ -29,7 +29,7 @@
 	 */
 	export default {
 		name: "up-overlay",
-		mixins: [mpMixin, mixin,props],
+		mixins: [mpMixin, mixin, props],
 		computed: {
 			overlayStyle() {
 				const style = {

src/uni_modules/uview-plus/components/up-popup/popup.uts

@@ -0,0 +1,28 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-00-12 00:47:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 00:47:21
+ */
+export default {
+    // popup组件
+    popup: {
+        show: false,
+        overlay: true,
+        mode: 'bottom',
+        duration: 300,
+        closeable: false,
+        overlayStyle: {},
+        closeOnClickOverlay: true,
+        zIndex: 10075,
+        safeAreaInsetBottom: true,
+        safeAreaInsetTop: false,
+        closeIconPos: 'top-right',
+        round: 0,
+        zoom: true,
+        bgColor: '',
+        overlayOpacity: 0.5
+    }
+} as UTSJSONObject

src/uni_modules/uview-plus/components/up-popup/props.uts

@@ -0,0 +1,91 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-00-12 00:47:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 00:47:21
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './popup'
+let crtProp = defProps['popup'] as UTSJSONObject
+
+export const propsPopup = defineMixin({
+    props: {
+        // 是否展示弹窗
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 是否显示遮罩
+        overlay: {
+            type: Boolean,
+            default: crtProp['overlay']
+        },
+        // 弹出的方向，可选值为 top bottom right left center
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 动画时长，单位ms
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // 是否显示关闭图标
+        closeable: {
+            type: Boolean,
+            default: crtProp['closeable']
+        },
+        // 自定义遮罩的样式
+        overlayStyle: {
+            type: [Object, String],
+            default: crtProp['overlayStyle']
+        },
+        // 点击遮罩是否关闭弹窗
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: crtProp['closeOnClickOverlay']
+        },
+        // 层级
+        zIndex: {
+            type: [String, Number],
+            default: crtProp['zIndex']
+        },
+        // 是否为iPhoneX留出底部安全距离
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: crtProp['safeAreaInsetBottom']
+        },
+        // 是否留出顶部安全距离（状态栏高度）
+        safeAreaInsetTop: {
+            type: Boolean,
+            default: crtProp['safeAreaInsetTop']
+        },
+        // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
+        closeIconPos: {
+            type: String,
+            default: crtProp['closeIconPos']
+        },
+        // 是否显示圆角
+        round: {
+            type: [Boolean, String, Number],
+            default: crtProp['round']
+        },
+        // mode=center，也即中部弹出时，是否使用缩放模式
+        zoom: {
+            type: Boolean,
+            default: crtProp['zoom']
+        },
+        // 弹窗背景色，设置为transparent可去除白色背景
+        bgColor: {
+            type: String,
+            default: crtProp['bgColor']
+        },
+        // 遮罩的透明度，0-1之间
+        overlayOpacity: {
+            type: [Number, String],
+            default: crtProp['overlayOpacity']
+        }
+    }
+})