产出物
功能
- 1、使用vue脚手架搭建项目
- 2.实现登陆弹窗组件封装
- 3.实现参数控制弹窗显示隐藏
- 4.正确实现登陆弹窗全屏遮罩
- 5.正确实现手机号前缀的选择，正则校验手机号格式与- 验证码长度
- 6.正确实现发生验证码倒计时（10S），倒计时中禁止- 再次点击
- 7.倒计时刷新页面，继续刷新时的时间，不能从10s开始倒计时
- 8.正确使用正则校验方法校验必填参数（如手机号、验证码位数和类型）
- 9.登陆时按钮正确loading或禁用，防止用户暴力点击
- 10.快速多次点击，重复发起请求？
核心功能讲解
正确实现手机号前缀的选择，手机号校验
手机号前缀选择
组件
- vantUI 输入项组件 https://vant-ui.github.io/vant/v2/#/zh-CN/field
- vantUI 气泡组件 https://vant-ui.github.io/vant/v2/#/zh-CN/popover
实现逻辑
- 页面实现：输入项组件的插槽label，插入气泡组件
- 功能逻辑：手机号前缀为变量 telCode，在气泡组件 @select 事件中 动态修改 telCode
示例代码
表单中部分代码
<van-field v-model="formData.phone" required placeholder="请输入手机号" :rules="[{ pattern, message: '请输入正确内容' }]"> <!-- 输入框的 左侧lable 插槽 --> <template #label> <!-- showPopover 气泡开关 actions：气泡下拉选项 select ：气泡选中回调事件 --> <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect" > <!-- 当 Popover 气泡 弹出时，会基于 reference 插槽的内容进行定位。 --> <template #reference> <!-- 点击内容，触发气泡弹框 --> <van-icon name="arrow-down" /> +86 </template> </van-popover> </template> </van-field> // data 数据 data(){ retrun { showPopover: false, // 通过 actions 属性来定义菜单选项 actions: [{ text: '+1 美国' }, { text: '+886 中国台湾' }, { text: 'xxxx 毛里求斯' }], } } // methods中 气泡弹框回调函数 onSelect(data) { console.log('气泡框选中了', data) this.telCode = data.text },
手机号校验
实现逻辑
vantUI 输入项组件中配置rules，定义表单校验，pattern 正则校验语法
示例代码
<van-field required placeholder="请输入手机号" :rules="[{ pattern,message: '请输入正确内容' }]"/> <!-- data 定义数据 --> pattern:/^1[3456789]\d{9}$/, /** /^ 以开头 1 手机号码开头是1 [3456789] 第二位是3-9里的一个数字 \d{9} 后面跟着9个数字 $/ 以结尾 */
页面刷新后倒计时不能重置，接着倒计时展示
缓存验证码倒计时，页面加载时从本地读取关闭页面前的倒计时、改变起始值
比如刷新前倒计时时间6秒，刷新后应该从6秒倒计时
倒计时功能
- 发送验证码、倒计时展示为两个按钮，点击实现状态切换。
- 点击发送验证码，开启验证码生效倒计时，使用定时器递减实现功能
data中定义初始时间，如：
data(){ retrun { isSendStatus:true,// 点击发送按钮为false，展示倒计时按钮 为true setp:10 // 初始10秒，倒计时 } }
methods 定义sendCode函数
// 发送验证码-开始倒计时 codeSend(){ // 展示发送中按钮 this.isSendStatus = false; // 定时器-递减 let interval = setInterval(()=>{ this.stepS-- if(this.stepS === 0){ // 倒计时结束，清空定时器，重置倒计时 this.isSendStatus = true this.stepS = 10 clearInterval(interval) } },1000) },
倒计时缓存
在定时器interval中 本地缓存当前时间，页面生命周期 mounted 挂载完，读取本地缓存，改变倒计时初始值。
methods 发送验证码函数
// 发送验证码-开始倒计时 codeSend(){ // 展示发送中按钮 this.isSendStatus = false; // 定时器-递减 let interval = setInterval(()=>{ this.stepS-- let stepS = this.stepS; // 缓存倒计时时间 console.log('setpS',stepS) localStorage.setItem('stepS',stepS) if(this.stepS === 0){ // 倒计时结束，清空定时器，重置倒计时 // 重新发送-展示发送按钮 // 清空本地倒计时缓存 localStorage.removeItem('stepS') this.isSendStatus = true this.stepS = 10 clearInterval(interval) } },1000) },
页面挂载完成，读取本地缓存时间。
mounted(){ //页面挂载完，读取本地倒计时缓存,初始化倒计时 let S = localStorage.getItem('stepS') if(S>0){ this.stepS = S; // 触发倒计时 this.codeSend() } },
