当前位置:网站首页>抖音实战~点赞数量弹框
抖音实战~点赞数量弹框
2022-07-02 22:10:00 【gblfy】
组件
在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>
边栏推荐
- 海思3559万能平台搭建:在截获的YUV图像上画框
- Strictly abide by the construction period and ensure the quality, this AI data annotation company has done it!
- 2016. 增量元素之间的最大差值
- AES高级加密协议的动机阐述
- Methods to solve the tampering of Chrome browser and edeg browser homepage
- 分布式监控系统zabbix
- The motivation of AES Advanced Encryption Protocol
- easyclick,ec权朗网络验证源码
- Lc173. Binary search tree iterator
- The first batch of Tencent cloud completed the first cloud native security maturity assessment in China
猜你喜欢
Loss function~
[adjustment] postgraduate enrollment of Northeast Petroleum University in 2022 (including adjustment)
Is 408 not fragrant? The number of universities taking the 408 examination this year has basically not increased!
Successfully changed Splunk default URL root path
Jielizhi, production line assembly link [chapter]
QT qsplitter splitter
最小生成树 Minimum Spanning Tree
[羊城杯2020]easyphp
P7072 [csp-j2020] live broadcast Award
Mask R-CNN
随机推荐
[adjustment] postgraduate enrollment of Northeast Petroleum University in 2022 (including adjustment)
泛型与反射,看这篇就够了
ping域名报错unknown host,nslookup/systemd-resolve可以正常解析,ping公网地址通怎么解决?
Typical case of data annotation: how does jinglianwen technology help enterprises build data solutions
地平线2022年4月最新方案介绍
The kth largest element in the [leetcode] array [215]
P1007 single log bridge
Use of recyclerview with viewbinding
Boot actuator - Prometheus use
MySQL查询附近的数据.并按距离进行排序.
[Solved] Splunk: Cannot get username when all users are selected“
[leetcode] most elements [169]
1px pixel compatibility of mobile terminal, 1px border
在SOUI里使用真窗口时使用SOUI的滚动条
Jerry's built-in shutdown current is 1.2ua, and then it can't be turned on by long pressing [chapter]
ServletContext learning diary 1
Go multithreaded data search
Splunk audit 的设定
LeetCode 968. Monitor binary tree
详解Promise使用