【uniapp】实现公共弹窗的封装以及调用-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uniapp】实现公共弹窗的封装以及调用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

图例：红框区域为 “ 内容区域 ”

【uniapp】实现公共弹窗的封装以及调用,移动端,uni-app,javascript,前端

一、组件

<!-- 弹窗组件 -->
<template>
<view class="add_popup" v-if="person.isShowPopup">
	<view class="popup_cont" :style="{width:props.width&&props.width>0?props.width+'px;':'auto;',
	                              height:props.height&&props.height>0?props.height+'px;':'auto;',
							      background:props.bgColor+'!important;'}">
		<view class="popup_close" @click="cancel"></view>
		<slot></slot>
	</view>
</view>
</template>

<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue'
const props = defineProps({
    isShow: {
        type: Boolean,
        required: true
    },
	width: {
		type: Number,
		required: false
	},
	height: {
		type: Number,
		required: false
	},
	bgColor: {
		type: String,
		required: false
	}
})
interface Iemit{
	(e:'cancelBtn'):void
}	
const emit=defineEmits<Iemit>()

let person=reactive({
	isShowPopup:false
})

watch(()=>props.isShow,(newVal)=>{
	person.isShowPopup=newVal
})

onMounted(()=>{
})
const cancel=()=>{
	person.isShowPopup=!person.isShowPopup
	emit('cancelBtn')
}
</script>

<style lang="scss" scoped>
.add_popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(0,0,0,.4);
	z-index: 99;
	.popup_cont{
		text-align: center;
		margin: -60rpx auto 0 auto;
		border-radius: 20rpx;
		color: #3D425B;
		font-size: 30rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		.popup_close{
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			transform: translate(-50%);
			width: 80rpx;
			height: 80rpx;
			background: url('@/static/education/cancel.png') no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>

二、页面调用

<template>
<Popups :isShow="showDioUnbindMseeage" :width="260" height="auto" :bgColor="'#fff'"
		@cancelBtn="showDioUnbindMseeage=false">
   <!-- 内容区域 -->		
</Popups>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Popups from "@/components/popups/index.vue";

const showDioUnbindMseeage = ref(false)
</script>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~文章来源地址https://www.toymoban.com/news/detail-693786.html

到了这里，关于【uniapp】实现公共弹窗的封装以及调用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！