1,准备组件popup
<template>
<view>
<view class="show-box-bg wx-login-box">
<view class="conten">
<view class="titl">{{ popupMsg.title }}</view>
<view class="text">{{ popupMsg.content }}</view>
<view class="btn-box">
<view class="cancel" @click='hidePopup("no")'>{{ popupMsg.cancel }}</view>
<view class="confirm" @click='hidePopup("yes")'>{{ popupMsg.confirm }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['popupMsg'],
data() {
return {
}
},
methods: {
hidePopup:function(type) {
this.$emit('handlePopup', type)
},
}
}
</script>
<style scoped lang="scss">
.wx-login-box {
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 88;
.conten {
width: 78%;
background-color: #fff;
z-index: 99;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 14upx;
overflow: hidden;
.titl {
width: 90%;
height: 110rpx;
font-size: 40rpx;
padding: 0 5%;
line-height: 140rpx;
}
.text {
width: 90%;
font-size: 28rpx;
padding: 0 5%;
margin-bottom: 40rpx;
}
.memberY {
width: 90%;
font-size: 28rpx;
color: #FFCC00;
padding: 0 5%;
text-align: center;
}
.memberB {
width: 90%;
font-size: 28rpx;
color: #007AFF;
padding: 0 5%;
text-align: center;
}
.btn-box {
width: 100%;
height: 90rpx;
display: flex;
border-top: 2rpx solid #969696;
.cancel {
width: 50%;
height: 100%;
font-size: 40rpx;
color: #999;
text-align: center;
line-height: 89rpx;
border-right: 2rpx solid #969696;
}
.confirm {
width: 50%;
height: 100%;
font-size: 40rpx;
color: #ffcc00;
text-align: center;
line-height: 99rpx;
}
}
}
}
</style>
2,使用组件
<template>
<view class="content">
<button type='primary' @click='showPopup=true'>点击弹框</button>
<!-- (3)使用 -->
<popup
:popupMsg = "popupMsg"
@handlePopup='handleShowOrHidePopup'
v-show="showPopup"/>
</view>
</template>
<script>
import popup from '@/components/popup.vue';
export default {
components: {popup},
data() {
return {
showPopup:false,
popupMsg:{
title:'这是标题',
content:'这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容',
cancel:'取消',
confirm:'确定'
},
hotgoods:[
{id:'01',title:'标题一'},
{id:'02',title:'标题二'},
],
}
},
methods: {
handleShowOrHidePopup:function(type){
if(type=='yes'){
console.log(type)
this.showPopup = false
}else{
console.log(type)
this.showPopup = false
}
},
}
}
</script>