项目中使用了多个弹窗，且内容不一样，于是重新进行封装（避免后期样式大改）
其中：图片，文字 按钮名 功能 都可以自定义（父子相互传值）
注意:按钮可以不传 默认是 “确认”,"取消"
项目结构↓
↓组件代码
<template>
<view>
<uni-popup ref="popup" background-color="#fff">
<view class="popConfig">
<view><img :src="iconUrl" alt=""></view>
<view class="popConfig-txt">
<view class="popConfig-title">{
{popName}}</view>
<view class="popConfig-des">{
{popDes}}</view>
</view>
<view class="popConfig-btn" v-if="popBtn">
<button @click="operate">{
{popBtn[0].name}}</button>
<button @click="close">{
{popBtn[1].name}}</button>
</view>
<view class="popConfig-btn" v-else>
<button @click="operate">确认</button>
<button @click="close">取消</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
props: {
showPop: {
type: Boolean,
required: true
},
iconUrl: {
type: String,
required: true
},
popName: {
type: String,
required: true
},
popDes: {
type: String,
required: true
},
popBtn: { // [{name:'确认'},{name:'取消'}]
type: Array,
required: false
}
},
data() {
return {};
},
methods: {
close() {
this.$emit("changeShowPop", false)
},
operate(){
this.$emit("firstBtnOperate","")
}
},
watch: {
'showPop': {
handler(newVal, oldVal) {
// console.log(111)
if (this.showPop == true) {
this.$nextTick(() => {
this.$refs.popup.open()
})
} else {
this.$nextTick(() => {
this.$refs.popup.close()
})
}
},
deep: true,
immediate: true
}
},
}
</script>
<style lang="scss" scoped>
.popConfig {
background-color: white;
box-sizing: border-box;
padding: 50rpx;
width: 90vw;
min-height: 600rpx;
border-radius: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
view {
img {
margin-top: 30rpx;
width: 150rpx;
height: 150rpx;
}
}
.popConfig-txt {
text-align: center;
.popConfig-title {
font-size: 40rpx;
color: #3b385aff;
}
.popConfig-des {
font-size: 35rpx;
color: #3b385aff;
}
}
.popConfig-btn {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
button {
width: 45%;
height: 80rpx;
line-height: 80rpx;
background-color: #5861d0ff;
color: white;
border-radius: 40rpx;
}
button:nth-last-child(1) {
background-color: white;
color: #5861d0;
border: 2rpx solid #5861d0;
}
}
}
</style>
具体使用↓
<popUpCom
:showPop = "showPop"
iconUrl='../../../static/img/common/完成.png'
popName='完成'
popDes='请确认是否完成？'
@changeShowPop = "changeShowPop"
@firstBtnOperate = "firstBtnOperate"
>
</popUpCom>script↓
注意：
btnConfig： 可以传可以不传，本案例没传 如果要传可以参照：[{name:'确认'},{name:'取消'}]
showPop 变量控制弹窗是否显示，默认为false
toStart() 方法是点击某个按钮触发 打开弹窗
changeShowPop() :方法是关闭弹窗
firstBtnOperate（）：方法是点击弹窗中的确认按钮，要触发的事件
<script>
import popUpCom from '@/components/popUpCom/popUpCom'
export default {
data() {
return {
btnConfig:[{name:"确认"},{name:"取消"}],
showPop:false
};
},
components: {
popUpCom
},
methods: {
toStart() {
// this.$refs.popup.open('center')
this.showPop = true
},
changeShowPop(v){
console.log(v)
this.showPop = v
},
firstBtnOperate(){
console.log(666)
}
}
}
</script>