组件
在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>