集美区网站建设,百度推广还要求做网站,福布斯中国100名人榜,开发公司成本部职责岗位职责和流程目录 1.前言2.代码2-1 子页面2-2 主页面 1.前言
需求#xff1a;当我在子页面定义了一个定时器#xff0c;点击获取验证码#xff0c;计时器开始倒计时#xff0c;在这个定时器没有走完#xff0c;退出关闭子页面#xff0c;再次进入子页面#xff0c;定时器此时会被刷… 目录 1.前言2.代码2-1 子页面2-2 主页面 1.前言
需求当我在子页面定义了一个定时器点击获取验证码计时器开始倒计时在这个定时器没有走完退出关闭子页面再次进入子页面定时器此时会被刷新但是我的需求是再次进去子页面时只要上次的计时器没有走完就继续走那么这时候就可以通过暴露属性事件去触发主页面的事件 具体思路在主页面定义也定义一个处理的定时器的事件当在子页面点击获取验证码开始倒计时同时调用这个暴露的事件 那么这时主页面就会触发定时器事件然后将这个倒计时的数据提取出来当然肯定有其他的方法去处理但是我不太会前端只有想到这种方式还望大佬指点
2.代码
2-1 子页面
2.1.1 定义属性将其暴露出来 props: {withdrawals: {type: Object,default() {return {}},},withdrawalWaitTime:{type: Number,default: 0},handWithdrawalWaitTime:{type: Function,default: null},closeWithdrawals: {type: Function,default: null}}2.1.2 在钩子函数里定义一个处理每次的计时每次从主页面过来时都会携带一个计时参数 withdrawalWaitTime根据这个值进行一个具体多久的倒计时
async mounted() {await this.fetchData()this.handMobile()this.handWithdrawalWaitTime2()},methods: {handWithdrawalWaitTime2(){this.isWithdrawalsVerify truethis.coolDownTime this.withdrawalWaitTimethis.interval setInterval(() {this.coolDownTime--;console.log(coolDownTime:${this.coolDownTime})if (this.coolDownTime 0) {this.isWithdrawalsVerify false;clearInterval(this.interval)}}, 1000)},}2.13 子页面页面按钮
basic-el-rowbasic-el-colel-form-item label短信验证码propmessageCheckCodev-ifthis.withdrawals.withdrawMsgCheck ENABLEel-inputv-modelwithdrawalsParam.messageCheckCodeclearablemaxlength60/el-input/el-form-item/basic-el-colbasic-el-colel-button typeprimary plain:disabledisWithdrawalsVerifyclicksendWithdrawCodev-ifthis.withdrawals.withdrawMsgCheck ENABLEspan v-show!isWithdrawalsVerify获取/spandiv v-showisWithdrawalsVerify this.coolDownTime 0span classcodeText{{ this.coolDownTime }}/spanspan stylemargin-left: 8px秒/span/div/el-button/basic-el-col
/basic-el-row2.1.4 点击事件调用暴露的函数事件 this.handWithdrawalWaitTime()会触发到对应主页面 事件 sendWithdrawCode() {this.$refs[withdrawals-form].validateField(withdrawalsAmount).then((valid) {if (valid) {this.withdrawSendCodeParam {memberId: this.withdrawals.id,withdrawalsAmount: this.withdrawalsParam.withdrawalsAmount}this.isWithdrawalsVerify true;this.coolDownTime 120;withdrawSendCode(this.withdrawSendCodeParam).then((response) {this.$message.success(发送短信验证码请求成功请您注意查收)}).catch((error) {this.withdrawalsParam this.tempWithdrawalsParamconsole.error(send withdraw code error, error)})this.handWithdrawalWaitTime()this.interval setInterval(() {this.coolDownTime--;if (this.coolDownTime 0) {this.isWithdrawalsVerify false;clearInterval(this.interval)}}, 1000)}});}2-2 主页面
2.2.1 主页面以组件的形式引入子页面定义一个抽屉传入的属性和事件子页面点击获取验证码时会触发handWithdrawalWaitTime事件并将计时的参数携带过去 basic-drawerv-modelwithdrawalsVisibletitle余额查询信息:footerfalsewithdrawals :closeWithdrawalscloseWithdrawalsVisible:withdrawalswithdrawalsParam:withdrawal-wait-time withdrawalWaitTime:hand-withdrawal-wait-timehandWithdrawalWaitTime/withdrawals/basic-drawer主页面事件会与子页面的计时同步执行 handWithdrawalWaitTime(){this.withdrawalWaitTime 120this.withdrawalInterval setInterval(() {this.withdrawalWaitTime--;if (this.withdrawalWaitTime 0) {this.isEditMobile false;clearInterval(this.withdrawalInterval)}}, 1000)},再从主页面过去时子页面也会接着计时
