关闭按钮在内部时

<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>

俩个组件根据需要在外部引入