关闭按钮在内部时
<template>
<div class="tipPop">
<div class="tipPop-show">
<div>
<img class="close" src="@/assets/img/close.png" @click.stop="handleClsoeData"/>
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
serviceClose:Boolean
},
methods:{
handleClsoeData() {
this.$parent.handleMessageClose();
},
}
}
</script>
<style lang="less" scoped>
.tipPop{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.5);
z-index: 888;
.tipPop-show{
position: fixed;
width: 280px;
min-height: 160px;
padding: 18px;
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 9px;
z-index: 999;
}
.close{
position: absolute;
right: 3%;
top: 4%;
width: 20px;
height: 20px;
z-index: 9999;
}
}
</style>
当关闭按钮在外部时,需要根据内容大小决定
<template>
<div class="custPop-bg" @click="handleClsoeData">
<div class="bg-item">
<div class="tipPop-show">
<slot></slot>
</div>
<div class="close" >
<van-icon name="cross" class="close-icon" @click="handleClsoeData"/>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
serviceClose:Boolean
},
methods:{
handleClsoeData() {
this.$parent.handleMessageClose();
},
}
}
</script>
<style lang="less" scoped>
.custPop-bg{
position: fixed;
width: 100%;
height: 100vh;
left: 0;
top: 0;
background: rgba(255,255,255,0);
display: flex;
align-items: center;
justify-items: center;
z-index: 888;
.bg-item{
// width: 70%;
margin: 0 auto;
}
}
.tipPop-show{
width: 70%;
height: auto;
margin: 0 auto;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.7);
border-radius: 9px;
}
.close{
width: 100%;
text-align: center;
margin-top: 24rpx;
.close-icon{
width: 20px;
height: 20px;
padding: 5px;
color: #fff;
font-size: 16px;
line-height: 20px;
margin-top: 10px;
background: rgba(0,0,0,0.7);
border-radius: 50%;
}
}
</style>
俩个组件根据需要在外部引入