当前位置：首页 > news >正文

【uniapp】实现公共弹窗的封装以及调用

news 2025/6/22 21:14:29

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

一、组件

<!-- 弹窗组件 -->
<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>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

查看全文

http://www.lryc.cn/news/144059.html