From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-overlay/u-overlay.vue | 68 ++++++++++++++++++++++++++++++++++ 1 files changed, 68 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-overlay/u-overlay.vue b/uni_modules/uview-ui/components/u-overlay/u-overlay.vue new file mode 100644 index 0000000..92de4e9 --- /dev/null +++ b/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