1,准备组件popup
<template><view><viewclass="show-box-bg wx-login-box"><viewclass="conten"><viewclass="titl">{{ popupMsg.title}}</view><viewclass="text">{{ popupMsg.content}}</view><viewclass="btn-box"><viewclass="cancel" @click='hidePopup("no")'>{{ popupMsg.cancel}}</view><viewclass="confirm" @click='hidePopup("yes")'>{{ popupMsg.confirm}}</view></view></view></view></view></template><script>exportdefault{
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:05%;
line-height:140rpx;}.text{
width:90%;
font-size:28rpx;
padding:05%;
margin-bottom:40rpx;}.memberY{
width:90%;
font-size:28rpx;
color: #FFCC00;
padding:05%;
text-align: center;}.memberB{
width:90%;
font-size:28rpx;
color: #007AFF;
padding:05%;
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><viewclass="content"><button type='primary' @click='showPopup=true'>点击弹框</button><!--(3)使用--><popup:popupMsg="popupMsg"
@handlePopup='handleShowOrHidePopup'
v-show="showPopup"/></view></template><script>import popupfrom'@/components/popup.vue';exportdefault{
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>