uni-app 4.13开发弹出层组件弹出关闭功能

Posted 2021-09-07 2019ab

index.nuve页面

<template>
	<view class="">
		<free-nav-bar :title="'微信'" :noreadnum="1" :fixed='true' @openExtend="openExtend"> 
			<template v-slot="title"></template>
		</free-nav-bar>
		
		<!-- 列表 -->
		<block v-for="(item,index) in list" :key="index">
			<free-media-list :item="item" :index="index"></free-media-list>
		</block>
		
		<!-- 弹出层 -->
		<free-popup ref="extend">
			<view style="width: 300rpx;height: 400rpx;"></view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMediaList from '@/components/free-ui/free-media-list.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	export default {
		components: {
			freeNavBar,
			freeMediaList,
			freePopup
		},
		data() {
			return {
				list:[
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:1
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:12
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:2
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:10
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			openExtend(){
				this.$refs.extend.show();
			}
		},
	}
</script>

<style>

</style>

free-pupop.vue

<template>
	<div style="z-index:9999;overflow:hidden;" v-if="status">
		<!-- 蒙版 -->
		<view class="position-fixed top-0 left-0 right-0 bottom-0" style="background:rgba(0,0,0,0.5);"  @click="hide"></view>
			<!-- 弹出框内容 -->
			<div class="position-fixed  bg-white" style="left: 100rpx;top: 100rpx;">
		      <slot></slot>	
			</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 是否开启蒙版颜色
			maskColor: {
				type: Boolean,
				default: false
			},
			
		},
		data() {
			return {
				status: false,
				x:-1,
				y:1,
				maxX:0,
				maxY:0
			}
		},
		mounted() {
			try {
			    const res = uni.getSystemInfoSync();
				this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth)
				this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight)
			} catch (e) {
			    // error
			}
		},
		computed: {
			getMaskColor() {
				let i = this.maskColor ? 0.5 : 0
				return `background-color: rgba(0,0,0,${i});` 
			},
			getBodyClass(){
				if(this.center){
					return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center'
				}
				let bottom = this.bottom ? 'left-0 right-0 bottom-0' : 'rounded border'
				return `${this.bodyBgColor} ${bottom}`
			},
			getBodyStyle(){
				let left = this.x > -1 ? `left:${this.x}px;` : ''
				let top = this.y > -1 ? `top:${this.y}px;` : ''
				return left + top
			}
		},
		methods:{
			show(){
				this.status = true
			},
			hide(){
				this.status = false
			}
		}
	}
</script>

<style scoped>
	.free-animated{
		/* #ifdef APP-PLUS-NVUE */
		/* transform: scale(0,0);
		opacity: 0; */
		/* #endif */
	}
	.z-index{
		/* #ifndef APP-NVUE */
		z-index: 9999;
		/* #endif */
	}
</style>

free-nav-bar.vue

<template>
	<view>
		<view class="bg-light" :class="fixed?'fixed-top':''">
			<!-- 状态栏 -->
			<view :style="'height:'+statusBarHeight+'px;'"></view>
			<!-- 导航 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 标题 -->
					<text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
				</view>
				<!-- 右边 -->
				<view class="flex align-center">
					<free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
					<free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
				</view>
				<!--\\ue6e3 \\ue682 -->
			</view>
		</view>

		<!-- 站位 -->
		<view v-if="fixed" :style="fixedStyle"></view>
	</view>
</template>

<script>
	import freeIconButton from './free-icon-button.vue';
	export default {
		components: {
			freeIconButton,
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			fixed:{
				type:Boolean,
				default:false
			},
			noreadnum:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
			}
		},
		mounted() {
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
		},
		computed: {
			fixedStyle() {
				return `height:${this.navBarHeight}px`;
			},
			getTitle(){
				let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';
				return this.title + noreadnum;
			}
		},
		methods:{
			openExtend(){
				this.$emit('openExtend');
			}
		}
	}
</script>

<style>

</style>

页面如下

感谢大家观看，下期再见