From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-mask/u-mask.vue | 123 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 123 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-mask/u-mask.vue b/uview-ui/components/u-mask/u-mask.vue
new file mode 100644
index 0000000..0b55d9d
--- /dev/null
+++ b/uview-ui/components/u-mask/u-mask.vue
@@ -0,0 +1,123 @@
+<template>
+ <view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click" @touchmove.stop.prevent="() => {}" :class="{
+ 'u-mask-zoom': zoom,
+ 'u-mask-show': show
+ }">
+ <slot />
+ </view>
+</template>
+
+<script>
+ /**
+ * mask 閬僵
+ * @description 鍒涘缓涓�涓伄缃╁眰锛岀敤浜庡己璋冪壒瀹氱殑椤甸潰鍏冪礌锛屽苟闃绘鐢ㄦ埛瀵归伄缃╀笅灞傜殑鍐呭杩涜鎿嶄綔锛屼竴鑸敤浜庡脊绐楀満鏅�
+ * @tutorial https://www.uviewui.com/components/mask.html
+ * @property {Boolean} show 鏄惁鏄剧ず閬僵锛堥粯璁alse锛�
+ * @property {String Number} z-index z-index 灞傜骇锛堥粯璁�1070锛�
+ * @property {Object} custom-style 鑷畾涔夋牱寮忓璞★紝瑙佷笂鏂硅鏄�
+ * @property {String Number} duration 鍔ㄧ敾鏃堕暱锛屽崟浣嶆绉掞紙榛樿300锛�
+ * @property {Boolean} zoom 鏄惁浣跨敤scale瀵归伄缃╄繘琛岀缉鏀撅紙榛樿true锛�
+ * @property {Boolean} mask-click-able 閬僵鏄惁鍙偣鍑伙紝涓篺alse鏃剁偣鍑讳笉浼氬彂閫乧lick浜嬩欢锛堥粯璁rue锛�
+ * @event {Function} click mask-click-able涓簍rue鏃讹紝鐐瑰嚮閬僵鍙戦�佹浜嬩欢
+ * @example <u-mask :show="show" @click="show = false"></u-mask>
+ */
+ export default {
+ name: "u-mask",
+ props: {
+ // 鏄惁鏄剧ず閬僵
+ show: {
+ type: Boolean,
+ default: false
+ },
+ // 灞傜骇z-index
+ zIndex: {
+ type: [Number, String],
+ default: ''
+ },
+ // 鐢ㄦ埛鑷畾涔夋牱寮�
+ customStyle: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ // 閬僵鐨勫姩鐢绘牱寮忥紝 鏄惁浣跨敤浣跨敤zoom杩涜scale杩涜缂╂斁
+ zoom: {
+ type: Boolean,
+ default: true
+ },
+ // 閬僵鐨勮繃娓℃椂闂达紝鍗曚綅涓簃s
+ duration: {
+ type: [Number, String],
+ default: 300
+ },
+ // 鏄惁鍙互閫氳繃鐐瑰嚮閬僵杩涜鍏抽棴
+ maskClickAble: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data() {
+ return {
+ zoomStyle: {
+ transform: ''
+ },
+ scale: 'scale(1.2, 1.2)'
+ }
+ },
+ watch: {
+ show(n) {
+ if(n && this.zoom) {
+ // 褰撳睍绀洪伄缃╃殑鏃跺�欙紝璁剧疆scale涓�1锛岃揪鍒扮缉灏�(鍘熸潵涓�1.2)鐨勬晥鏋�
+ this.zoomStyle.transform = 'scale(1, 1)';
+ } else if(!n && this.zoom) {
+ // 褰撻殣钘忛伄缃╃殑鏃跺�欙紝璁剧疆scale涓�1.2锛岃揪鍒版斁澶�(鍥犱负鏄剧ず閬僵鏃跺凡閲嶇疆涓�1)鐨勬晥鏋�
+ this.zoomStyle.transform = this.scale;
+ }
+ }
+ },
+ computed: {
+ maskStyle() {
+ let style = {};
+ style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+ if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
+ else style.zIndex = -1;
+ style.transition = `all ${this.duration / 1000}s ease-in-out`;
+ // 鍒ゆ柇鐢ㄦ埛浼犻�掔殑瀵硅薄鏄惁涓虹┖锛屼笉涓虹┖灏辫繘琛屽悎骞�
+ if (Object.keys(this.customStyle).length) style = {
+ ...style,
+ ...this.customStyle
+ };
+ return style;
+ }
+ },
+ methods: {
+ click() {
+ if (!this.maskClickAble) return;
+ this.$emit('click');
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ transition: transform 0.3s;
+ }
+
+ .u-mask-show {
+ opacity: 1;
+ }
+
+ .u-mask-zoom {
+ transform: scale(1.2, 1.2);
+ }
+</style>
--
Gitblit v1.9.3