v1.0.0-beta 源码正式开源

2026-06-12 13:19:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,132 @@
+<template>
+	<view class="tm-maskFlow" :style="{
+		width:width+'px',
+		height:height+'px'
+	}" v-if="show">
+		<tm-translate  @start="$emit('start')" :duration="duration" :wait="0"  :animation-name="aniName">
+			<view  @click.stop="closeMask" class="tm-maskFlow-mask" :style="{
+				background:bgColor,
+				width:width+'px',
+				height:height+'px'
+			}"></view>
+			<view  @click.stop="closeMask" class="tm-maskFlow-body flex-center">
+				<view @click.stop="">
+					<slot></slot>
+				</view>
+			</view>
+		</tm-translate>
+
+	</view>
+</template>
+
+<script>
+	/**
+	 * 黑色遮罩
+	 * @property {String} bg-color = [rgba(0,0,0,0.35)] 默认：rgba(0,0,0,0.35)，背景颜色值。
+	 * @property {Boolean} close = [] 默认：true，点击遮罩是否关闭。
+	 * @property {Boolean} blur = [] 默认：true，是否显示模糊背景。
+	 * @property {Boolean} value = [] 默认：false，推荐使用value.sync或者v-model，来控制显示和关闭。
+	 * @property {Function} change 和v-model同步，显示 和隐藏时触发，返回当前变化 参数true显示，false关闭。
+	 * @example <tm-maskFlow v-model="show"></tm-maskFlow>
+	 */
+	import tmTranslate from "@/tm-vuetify/components/tm-translate/tm-translate.vue"
+	export default {
+		components:{tmTranslate},
+		name: 'tm-maskFlow',
+		model: {
+			prop: "value",
+			event: 'input'
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: 'rgba(0,0,0,0.35)'
+			},
+			close: {
+				type: Boolean,
+				default: true
+			},
+			value: {
+				type: Boolean,
+				default: false
+			},
+			duration:{
+				type:Number,
+				default:300
+			},
+			blur:{
+				type:Boolean|String,
+				default:true,
+			}
+		},
+		data() {
+			return {
+				width: 0,
+				height: 0,
+				aniName: 'fadeIn'
+			};
+		},
+		created() {
+			let syinfo = uni.getSystemInfoSync();
+			this.width = syinfo.screenWidth;
+			this.height = syinfo.screenHeight;
+		},
+		watch:{
+			show:function(){
+				
+				this.$emit("input", this.value)
+				this.$emit("change", this.value)
+				this.$emit("update:value", this.value)
+			}
+		},
+		computed: {
+			show: {
+				get: function() {
+					return this.value;
+				},
+				set: function(val) {
+					
+					this.$emit("input", val)
+					this.$emit("change", val)
+					this.$emit("update:value", val)
+
+				},
+			}
+		},
+		methods: {
+			
+			closeMask() {
+				if (!this.close) return;
+				this.show = false;
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tm-maskFlow {
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 500;
+
+		.tm-maskFlow-mask {
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			.blur{
+				backdrop-filter:blur(3px);
+			}
+		}
+
+		.tm-maskFlow-body {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			overflow-y: auto;
+		}
+	}
+</style>