From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-overlay/u-overlay.vue | 68 ++++++++++++++++++++++++++++++++++
1 files changed, 68 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-overlay/u-overlay.vue b/minipro_standard/uni_modules/uview-ui/components/u-overlay/u-overlay.vue
index e69de29..92de4e9 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-overlay/u-overlay.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-overlay/u-overlay.vue
@@ -0,0 +1,68 @@
+<template>
+ <u-transition
+ :show="show"
+ custom-class="u-overlay"
+ :duration="duration"
+ :custom-style="overlayStyle"
+ @click="clickHandler"
+ >
+ <slot />
+ </u-transition>
+</template>
+
+<script>
+ import props from './props.js';
+
+ /**
+ * overlay 閬僵
+ * @description 鍒涘缓涓�涓伄缃╁眰锛岀敤浜庡己璋冪壒瀹氱殑椤甸潰鍏冪礌锛屽苟闃绘鐢ㄦ埛瀵归伄缃╀笅灞傜殑鍐呭杩涜鎿嶄綔锛屼竴鑸敤浜庡脊绐楀満鏅�
+ * @tutorial https://www.uviewui.com/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 <u-overlay :show="show" @click="show = false"></u-overlay>
+ */
+ export default {
+ name: "u-overlay",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ computed: {
+ overlayStyle() {
+ const style = {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ zIndex: this.zIndex,
+ bottom: 0,
+ 'background-color': `rgba(0, 0, 0, ${this.opacity})`
+ }
+ return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+ }
+ },
+ methods: {
+ clickHandler() {
+ this.$emit('click')
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+ $u-overlay-top:0 !default;
+ $u-overlay-left:0 !default;
+ $u-overlay-width:100% !default;
+ $u-overlay-height:100% !default;
+ $u-overlay-background-color:rgba(0, 0, 0, .7) !default;
+ .u-overlay {
+ position: fixed;
+ top:$u-overlay-top;
+ left:$u-overlay-left;
+ width: $u-overlay-width;
+ height:$u-overlay-height;
+ background-color:$u-overlay-background-color;
+ }
+</style>
--
Gitblit v1.9.3