跨平台网站开发,东莞网站推广需要多少钱,网站组件,建设工程交易服务网学校要求的实验设计,基于vue实现bilibili网页版,可实现以下功能 (1)基本的悬浮动画和页面渲染 (2)可实现登录和未登录的页面变化 (3)在登录页面的,实现密码判断,或者短信验证方式的倒数功能 (4)实现轮播图 (5)实现预览视频(GIF) (6)页面下拉到一定高度出现top栏以及右下角的返回… 学校要求的实验设计,基于vue实现bilibili网页版,可实现以下功能 (1)基本的悬浮动画和页面渲染 (2)可实现登录和未登录的页面变化 (3)在登录页面的,实现密码判断,或者短信验证方式的倒数功能 (4)实现轮播图 (5)实现预览视频(GIF) (6)页面下拉到一定高度出现top栏以及右下角的返回功能 由于篇幅,代码较长,本文仅罗列一些基本代码,要源码的伙伴直接在本文评论即可 1.基本页面
1.1未登录 1.2已登录 以下是基本框架代码
templatediv idAppel-container!--登录框--EntryBox :isEntryisEntry changeIsEntry_EBhandleChangeIsEntry :qcImgqcImg :hasLoginhasLoginchangeIsLoginchangeIsLogin_Eb/EntryBox MoveTop :isEntryisEntry changeIsEntryhandleChangeIsEntry :hasLoginhasLoginchangeIsloginchangeIsLogin v-ifisTopShow/MoveTop!--头部--el-headerNavBar :isEntryisEntry changeIsEntryhandleChangeIsEntry :hasLoginhasLoginchangeIsloginchangeIsLogin/NavBar!--头部背景--div classbannerimg src./assets/img/bac.png alt //div/el-header!-- 主体 --el-mainTabBox/TabBoxMainTop/MainTopMainBottom/MainBottom/el-mainBottomBox v-ifbottomShow/BottomBox/el-container/div
/template
2.登录页面 2.1实现锁定密码框时,左右下角图片的变化 img src../assets/img/login_L.png alt classe-l-img v-ifisFocusimg src../assets/img/closeL.png alt classe-l-img v-elseimg src../assets/img/login_R.png alt classe-r-img v-ifisFocusimg src../assets/img/closeR.png alt classe-r-img v-else
利用v-if即可,在获得输入框获得焦点时候,让isFocus相对应变化即可
2.2自由切换短信/密码登录 利用点击事件切换对应变量的值即可
el-form labor-width150px classentry_Form v-ifEntryMethod mimael-form-item label账号 classuserInputel-input placeholder请输入账号 v-modelUserNameInput/el-input/el-form-itemel-form-item label密码 classpassInput el-input placeholder请输入密码 focusisFocusfalse blurisFocustrue refPassInput :typeinputType v-modelpassWordInput keyup.enter.nativehandleLogin/el-inputdiv classp-right v-if!isCheckspani classiconfont icon-chakanmima mousedown.preventhandleEyeClose/i/spana hrefjavascript:;忘记密码/a/divdiv classp-right v-elsespani classiconfont icon-chakanmima1 mousedown.preventhandleEyeOpen/i/spana hrefjavascript:;忘记密码/a/div/el-form-item/el-formel-form labor-width150px classentry_Form v-elseel-form-item label86 classuserInputel-input placeholder请输入手机号 v-modelPhoneNumInput/el-inputel-divider classen-divider directionhorizontal/el-dividerel-button :disabled(!isPhoneNumberValid ) || (downCount ! 0) clickhandleGetCaptcha{{ GetButtonText }}/el-button/el-form-itemel-form-item label验证码 classpassInput el-input placeholder请输入验证码 focusisFocusfalse blurisFocustrue refpasswordInput v-modelCaptchaInput keyup.enter.nativehandleLoginByCaptcha/el-input/el-form-item/el-form
2.3只有当手机号输入为11位数字的时候,按钮才启动 2.4对应的错误提示弹框 handleLoginByCaptcha(){if(this.CaptchaInput 12345){this.UserNameInput this.passWordInput this.$emit(changeIsLogin,true)this.handleClick_entryBox()clearInterval(this.timer_ET);this.downCount 0}else if(this.CaptchaInput ){this.getErrorShowText 请输入验证码this.passWordError truesetTimeout(() {this.passWordError false;},1000)}else{this.getErrorShowText 验证码错误this.passWordError truesetTimeout(() {this.passWordError false;},1000)}},handleGetCaptcha(){if (!(/^\d{11}$/.test(this.PhoneNumInput))) {this.getErrorShowText 请输入正确的手机号this.passWordError truesetTimeout(() {this.passWordError false;},1000)return;}
2.5获取验证码倒计时 startCountDown(){this.downCount 60;this.timer_ET setInterval(() {if(this.downCount 0){this.downCount--;}else{clearInterval(this.timer_ET);this.timer_ET null}},1000)}, 3.底部右下角
3.1悬浮展开 3.2点击回到顶部 div classbackBox clickscrollToTopi classiconfont icon-jiantou_down/idiv顶部/div/div
scrollToTop() {window.scrollTo(0, 0);}, 4.总结 还有其他功能由于篇幅问题就不全部展示,需要源码的伙伴直接文字评论即可
