组件
在components下面新建ge-popup.vue

<template><view><view class="mask"></view><!--绑定微信--><view class="wxbox"><view class="weixin"><image src="../static/dz.jpg"></image></view><view class="tips">"{{nickName}}"共获得{{likeNum}}个赞</view><view class="tips" @click="close">确定</view></view></view>
</template><script>export default {props: {nickName: {type: String,default: '昕泽之源'},likeNum: {type: Number,default: 1}},data() {return {};},methods: {close() {this.$emit('close');}}}
</script><style lang="scss">.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 888;background-color: rgba(0, 0, 0, 0.6);}//微信弹窗.wxbox {position: absolute;top: 20%;z-index: 998;width: 80%;left: 10%;background-color: #fff;.weixin {text-align: center;image {width: 100%;height: 120px;}}.tips {padding: 10rpx 20rpx;text-align: center;font-size: 35rpx;color: #333;}}
</style>

使用

<template><view><popup v-show="isMask" :nickName="nickName" :likeNum="likeNum" @close="closeMask()"></popup></view>
</template><script>import popup from "@/components/ge-popup.vue";export default {components: {popup},data() {return {nickName: "昕泽之源2",isMask: true,likeNum: 10}},onLoad() {},methods: {closeMask() { //关闭弹窗console.log("isMask")this.isMask = false;},update() {console.log('更新操作');}}}
</script><style>
</style>