69 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			69 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
<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>
 |