图例：红框区域为 “ 内容区域 ”
一、组件 <!-- 弹窗组件 --><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.isShowPopupemit('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>希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
