uniapp弹出层

组件

mask.vue

template

<template>
	<view>
		<view class="tui-actionsheet-class tui-actionsheet" :class="[show?'tui-actionsheet-show':'']">
			<view class="tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
				{{tips}}
			</view>
			
			<view class="close-btn" hover-class=""
			:hover-stay-time="150" v-if="isCancel" @tap="handleClickCancel">关闭</view>
			
		</view>
		<view class="tui-actionsheet-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickMask"></view>
	</view>
</template>

script

export default {
	
	props: {
		//点击遮罩 是否可关闭
		maskClosable: {
			type: Boolean,
			default: true
		},
		//显示操作菜单
		show: {
			type: Boolean,
			default: false
		},
	
		//提示文字
		tips: {
			type: String,
			default: ""
		},
		//提示文字颜色
		color: {
			type: String,
			default: "#9a9a9a"
		},
		//提示文字大小 rpx
		size: {
			type: Number,
			default: 26
		},
		//是否需要取消按钮
		isCancel: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		handleClickMask() {
			if (!this.maskClosable) return;
			this.handleClickCancel();
		},
		handleClickCancel() {
			this.$emit('chooseCancel');
		}
	}
}

style

.tips{
	padding: 20upx 0 100upx 0;
	text-align: center;
}
.close-btn{
	width: 200upx;
	margin: 0 auto;
	padding: 20upx 0;
	background: #4CD964;
	color: #fff;
	text-align: center;
	border-radius: 20upx;
}
/* 子模块 */
.tui-actionsheet {
	width: 100%;
	height: calc(100% - 200upx);
	background: #fff;
	border-radius:40upx 40upx 0 0;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	visibility: hidden;
	transform: translate3d(0, 100%, 0);
	transform-origin: center;
	transition: all 0.3s ease-in-out;
}

.tui-actionsheet-show {
	transform: translate3d(0, 0, 0);
	visibility: visible;
}
/* 遮罩层 */
.tui-actionsheet-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 9996;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
} 
.tui-mask-show {
	opacity: 1;
	visibility: visible;
}

使用

template

<template>
    <view>
		<view @tap="chooseMenu" class="btnOpen">打开</view>
		<mask 
			:tips="showActionSheet.tips" 
			:itemList="showActionSheet.itemList" 
			:show="showActionSheet.show" 
			:maskClosable="showActionSheet.maskClosable" 
			:isCancel="showActionSheet.isCancel" 
			@chooseCancel="chooseCancel">
		</mask>
	</view>
</template>

script

import mask from '../../common/mask/mask.vue';
export default{
	components:{
		mask
	},
	data(){
		return{
			showActionSheet: {
				show: false,
				maskClosable: true,
				tips: "弹出层-标题",
					
				color: "#9a9a9a",
				size: 26,
				isCancel: true
			}	
		}
	},
	onLoad() {
		
	},
	methods:{
		// 点击弹窗
		chooseMenu() {
			this.showActionSheet.show = true;
		},
			
		// 弹窗关闭
		chooseCancel() {
			this.showActionSheet.show = false;
		}
	}
}

style

.btnOpen{
	width: 200upx;
	padding: 20upx 40upx;
	background: #4CD964;
	border-radius: 10upx;
	text-align: center;
	color: #fff;
	margin:100upx auto;
}