Multiple pop-up windows were used in the project, and the contents were different, so they were re-encapsulated (to avoid major style changes later)
Among them: pictures and text button name functions can be customized (parent and son pass values to each other)
Note: The button can be omitted and the default is "Confirm" or "Cancel"
Project structure↓
↓Component code
<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>
Specific use↓
<popUpCom
:showPop = "showPop"
iconUrl='../../../static/img/common/完成.png'
popName='完成'
popDes='请确认是否完成？'
@changeShowPop = "changeShowPop"
@firstBtnOperate = "firstBtnOperate"
>
</popUpCom>script↓
Notice:
btnConfig: It can be passed or not. In this case, it is not passed. If you want to pass it, you can refer to: [{name:'Confirm'},{name:'Cancel'}]
The showPop variable controls whether the pop-up window is displayed. The default is false.
The toStart() method is to click a button to trigger the opening of the pop-up window.
changeShowPop(): The method is to close the pop-up window
firstBtnOperate(): The method is to click the confirmation button in the pop-up window, the event to be triggered
<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>