封装自己的底部弹出框

前言

自己工作的时候接受的一个项目因为app壳子版本登记太低也是为了防止出现兼容问题，所有的组件都是自己封装的，这个项目是基于Uniapp开发的App和H5.我接手的业务中涉及到的组件很多，今天就自己封装一个底部弹出框，因为我这个弹出框是弹出内容在里面做选择，所以原来封装的都不好用不适合所以自己开发的。

代码部分

这是一个弹出框里面有很多的内容

<template> <view @click='open'>点击打开</view> <view class="poupbox"  :style="{transform:  status ? 'translateY(0)' : 'translateY(100%)'}"> 		这里写你自己想写的内容	 </view> <template> export default { 		data() { 			return {                             status:false 			}  		}, 		onLoad() {  		}, 		methods: {                 open(){                     this.status=!status;                 }                                               }  	}  </script> <style> 	.poupbox{ 		background-color: #FFFFFF; 		border-top: 1px solid #CCCCCC; 		border-radius: 8px; 		position: fixed; 		left: 0; 		right: 0; 		bottom: 0; 		z-index: 10; 		transition: all .3s;         }   </style> 

结语

这就是最简单一个弹出框，可以基于这个弹出框去写时间选择的弹窗、日期选择的下拉框，把自己需求写到自己代码的内容区就可以了。