first

components/my-components/my-mask.vue

@@ -0,0 +1,79 @@
+<template>
+	<view class="mask u-fixed tranistion position-all u-flex u-flex-col u-row-center u-col-center" v-if="show"
+		:style="computedStyle" @tap="maskClick">
+		<view class="w-full" @tap.stop="nullFunction">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		computed,
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		show:{
+			type: Boolean,
+			default: false
+		},
+		zIndex: {
+			type: [Number, String]
+		},
+		tapClose: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emits = defineEmits(['close', 'toggle', 'open'])
+	watch(()=>props.show,(newval)=>{
+		show.value=newval
+	})
+	let show = ref(props.show)
+
+	function close() {
+		show.value = false
+		emits('close')
+	}
+
+	function open() {
+		show.value = true
+		emits('open')
+	}
+
+	function nullFunction() {
+
+	}
+
+	function toggle() {
+		if (show.value) {
+			close()
+		} else {
+			open()
+		}
+	}
+
+	function maskClick() {
+		if (props.tapClose) {
+			close()
+		}
+	}
+	const computedStyle = computed(() => {
+		return `
+		z-index:${props.zIndex};
+		`
+	})
+
+	defineExpose({
+		close,
+		toggle,
+		open
+	})
+</script>
+
+<style lang="scss">
+	.mask {
+		background-color: rgba(51, 51, 51, .5);
+	}
+</style>