抖音实战~点赞数量弹框

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