1、效果展示
这节我们先来看一下弹窗的效果是啥样的
2、添加自定义弹窗
(1)编辑pages/index/index.vue文件
这部分的样式是自定义弹窗的样式,将这些样式代码添加到style部分中,放在原先已存在的代码的后面
.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { box-sizing: border-box; width: 560rpx; overflow: hidden; position: fixed; top: 30%; left: 0; z-index: 9999; background: #fff; margin: -150rpx 95rpx; border-radius: 16rpx; } .modal-content { box-sizing: border-box; display: flex; padding: 0rpx 53rpx 50rpx 53rpx; font-size: 32rpx; align-items: center; justify-content: center; flex-direction: column; } .content-tip { text-align: center; font-size: 36rpx; color: #333333; } .content-text { height:130px; padding:10px 0px 50px 0px; font-size:14px; } .modal-footer { box-sizing: border-box; display: flex; flex-direction: row; border-top: 1px solid #e5e5e5; font-size: 16px; font-weight:bold; height: 45px; line-height: 45px; text-align: center; background:#feb600; } button { width: 100%; background:#feb600; color:#FFFFFF; font-weight:bold; } .img { width: 280px; height:90px; } .little-tip { padding-top:15px; padding-bottom:3px; font-size: 14px; font-weight:bold; color: #feb600; } .little-content { padding-top:5px; font-size: 13px; color:#606060; } .key-bold { padding-top:5px; font-size: 14px; font-weight:bold; }
(2)编辑template部分
将【授权登录】按钮这一行代码,替换成下面的代码。根据参考代码,找到添加的位置
<!-- 参考代码,无需粘贴 <template> <div> —> <!-- 需要粘贴的部分,替换掉【授权登录】按钮这一行代码 --> <div class="modal-mask"> </div> <div class="modal-dialog"> <div class="modal-content"> <img class="img" src="../../static/images/littleTip-huang.jpg"> <div class="content-text"> <p class="key-bold">真自律是一款自律神器。</p> <p class="key-bold">将生活想象成通关打怪,打败自己的心魔加分,被心魔打败减分。</p> <p class="little-tip">举个例子:</p> <p class="little-content"> 午饭忍住没有吃麻辣烫,吃的绿色蔬菜,加5分; </p> <p class="little-content"> 但是晚饭还是没有忍住T_T,罪恶罪恶,减10分。 </p> </div> </div> <div class="modal-footer"> <!-- 小程序集成的API,通过button来授权登录 --> <button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">授权登录</button> </div> </div> <!-- 参考代码,无需粘贴 <div class="show"> -->
(3)查看效果
每次查看效果都需要先在终端启动项目哦~会出现我们上面演示的效果