基于vue实现bilibili网页

学校要求的实验设计,基于vue实现bilibili网页版,可实现以下功能

(1)基本的悬浮动画和页面渲染

(2)可实现登录和未登录的页面变化

(3)在登录页面的,实现密码判断,或者短信验证方式的倒数功能

(4)实现轮播图

(5)实现预览视频(GIF)

(6)页面下拉到一定高度出现top栏以及右下角的返回功能

由于篇幅,代码较长,本文仅罗列一些基本代码,要源码的伙伴直接在本文评论即可

1.基本页面

1.1未登录

1.2已登录

以下是基本框架代码

css 复制代码
<template>
  <div id="App">
    <el-container>
      <!--登录框-->
      <EntryBox :isEntry="isEntry" @changeIsEntry_EB="handleChangeIsEntry" :qcImg="qcImg" :hasLogin="hasLogin"
        @changeIsLogin="changeIsLogin_Eb"></EntryBox> 
      <MoveTop :isEntry="isEntry" @changeIsEntry="handleChangeIsEntry" :hasLogin="hasLogin"
        @changeIslogin="changeIsLogin" v-if="isTopShow"></MoveTop>
      <!--头部-->
      <el-header>
        <NavBar :isEntry="isEntry" @changeIsEntry="handleChangeIsEntry" :hasLogin="hasLogin"
        @changeIslogin="changeIsLogin"></NavBar>
        <!--头部背景-->
        <div class="banner">
          <img src="./assets/img/bac.png" alt="" />
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main>
       <TabBox></TabBox>
        <MainTop></MainTop>
        <MainBottom></MainBottom>
      </el-main>
      <BottomBox v-if="bottomShow"></BottomBox>
    </el-container>
  </div>
</template>

2.登录页面

2.1实现锁定密码框时,左右下角图片的变化

css 复制代码
<img src="../assets/img/login_L.png" alt="" class="e-l-img" v-if="isFocus">
            <img src="../assets/img/closeL.png" alt="" class="e-l-img" v-else>
            <img src="../assets/img/login_R.png" alt="" class="e-r-img" v-if="isFocus">
            <img src="../assets/img/closeR.png" alt="" class="e-r-img" v-else>

利用v-if即可,在获得输入框获得焦点时候,让isFocus相对应变化即可

2.2自由切换短信/密码登录

利用点击事件切换对应变量的值即可

html 复制代码
<el-form labor-width="150px" class="entry_Form" v-if="EntryMethod === 'mima'">
                <el-form-item label="账号" class="userInput">
                  <el-input placeholder="请输入账号" v-model="UserNameInput"></el-input>
                </el-form-item>
                <el-form-item label="密码" class="passInput" 
                >
                  <el-input placeholder="请输入密码" @focus="isFocus=false" @blur="isFocus=true" ref="PassInput"  :type="inputType" v-model="passWordInput" @keyup.enter.native="handleLogin"></el-input>
                  <div class="p-right" v-if="!isCheck">
                    <span><i class="iconfont icon-chakanmima" @mousedown.prevent="handleEyeClose"></i></span>
                    <a href="javascript:;">忘记密码?</a>
                  </div>
                  <div class="p-right" v-else>
                    <span><i class="iconfont icon-chakanmima1" @mousedown.prevent="handleEyeOpen"></i></span>
                    <a href="javascript:;">忘记密码?</a>
                  </div>
                </el-form-item>
              </el-form>
              <el-form labor-width="150px" class="entry_Form" v-else>
                <el-form-item label="+86" class="userInput">
                  <el-input placeholder="请输入手机号" v-model="PhoneNumInput"></el-input>
                  <el-divider class="en-divider" direction="horizontal"></el-divider>
                  <el-button :disabled="(!isPhoneNumberValid ) || (downCount !== 0)" @click="handleGetCaptcha">{{ GetButtonText }}</el-button>
                </el-form-item>
                <el-form-item label="验证码" class="passInput" >
                  <el-input placeholder="请输入验证码" @focus="isFocus=false" @blur="isFocus=true" ref="passwordInput" v-model="CaptchaInput" @keyup.enter.native="handleLoginByCaptcha"></el-input>
                </el-form-item>
              </el-form>

2.3只有当手机号输入为11位数字的时候,按钮才启动

2.4对应的错误提示弹框

javascript 复制代码
 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 = true
          setTimeout(() => {
            this.passWordError = false;
          },1000)
        }else{
          this.getErrorShowText = '验证码错误'
          this.passWordError = true
          setTimeout(() => {
            this.passWordError = false;
          },1000)
        }
      },
      handleGetCaptcha(){
        if (!(/^\d{11}$/.test(this.PhoneNumInput))) {
          this.getErrorShowText = '请输入正确的手机号'
          this.passWordError = true
          setTimeout(() => {
            this.passWordError = false;
          },1000)
        return;
    }

2.5获取验证码倒计时

javascript 复制代码
 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点击回到顶部

javascript 复制代码
 <div class="backBox" @click="scrollToTop">
        <i class="iconfont icon-jiantou_down"></i>
        <div>顶部</div>
    </div>
javascript 复制代码
scrollToTop() {
      window.scrollTo(0, 0);
    },

4.总结

还有其他功能由于篇幅问题就不全部展示,需要源码的伙伴直接文字评论即可

相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫2 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel3 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手7 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法7 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode7 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript