最近我準備在自己的網站上開發(fā)一個博客系統(tǒng)，首先要實現后臺登錄界面。我選擇使用Vue 3 + Vite + TypeScript框架來構建，下面是針對該主題的詳細說明：
在網頁中使用視頻作為背景圖已經相當常見了，而且網上也有很多相關的插件可供使用。我選擇使用"vue-responsive-video-background-player"插件來實現這個功能。
首先，你需要通過以下命令來安裝該插件：
npm install vue-responsive-video-background-player
下面是兩種不同的引入方式，并將插件注冊到Vue應用中：
作為組件：
在main.ts文件中引入插件，并將其作為一個全局組件注冊：
import VideoBackground from 'vue-responsive-video-background-player'
Vue.component('video-background', VideoBackground);
作為插件：
在main.ts文件中引入插件，并使用Vue的use方法注冊插件：
import { Plugin } from 'vue-responsive-video-background-player'
Vue.use(Plugin);
如果在使用過程中出現了找不到聲明模塊的錯誤，你可以創(chuàng)建一個以.d.ts為后綴的新文件，然后添加以下內容：
declare module 'vue-responsive-video-background-player'{
const content: any
export = content
}
這樣就能解決找不到聲明模塊的問題了。
創(chuàng)建視頻組件
<template>
<div class="v_bg" style="z-index: 0;">
<video-background src="視頻地址" style="width: 100vw;max-width:100%; height: 100vh;height: 100vh;" muted preload playsWhen="canplay"
objectFit="cover">
<h1 style="color: white;padding-left: 20px;" >Entrie Star皆星河</h1>
</video-background>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
</script>
<style scoped>
body {
margin: 0;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
</style>
- src（路徑，必填)
- autoplay（自動播放,默認值：true)
- muted（靜音，默認值：true)
- preload（預加載，默認值：auto)
- objectFit（適應容器，默認值：cover|fill|contain)
更多的組件配置可以參考vue-responsive-video-background-player文檔
使用組件
//創(chuàng)建login.vue
<template>
<div class="login">
<videoTool></videoTool>
<div class="Loginform">
<el-row :gutter="20">
<el-col :span="15">
<div class="input_form">
<div class="title">歡迎來到英雄聯盟~</div>
<div class="input_user">
<img class="user_logo" src="@/assets/lol.png">
<el-input v-model="username" placeholder="請輸入召喚師賬號" />
</div>
<div class="input_pas">
<img class="pas_logo" src="@/assets/R-C_pixian.png">
<el-input v-model="password" placeholder="請輸入召喚師密碼" />
</div>
<div class="input_valiCode">
<el-input v-model="vailcode" placeholder="請輸入驗證碼" />
<valicode></valicode>
</div>
<div class="commit">
<el-button type="warning" >進入峽谷</el-button>
</div>
</div>
</el-col>
<el-col :span="9">
</el-col>
</el-row>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref} from 'vue';
import "animate.css";
import videoTool from '@/components/videoTool.vue'
const username=ref()
const password=ref()
const vailcode=ref()
</script>
<style lang="scss" scoped>
body {
margin: 0;
}
.login {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
.Loginform {
position: fixed;
width: 700px;
height: 400px;
background-color: rgb(34, 50, 75);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
opacity: 0.95;
background-image: url('@/assets/1_pixian.png');
background-size: 700px 400px;
background-position: 230px 0;
background-repeat: no-repeat;
.input_form {
width: calc(100% - 20px);
height: 380px;
margin: 10px 10px;
.title {
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 30px;
font-weight: bolder;
}
.input_user {
display: flex;
width: 90%;
height: 80px;
margin: 0 auto;
align-items: center;
position: relative;
.user_logo {
width: 25px;
height: 25px;
position: absolute;
z-index: 1111;
}
:deep(.el-input .el-input__inner)::placeholder {
text-indent: 20px;
color: rgb(95, 40, 74);
/* 設定縮進的距離，根據需要進行調整 */
}
}
.input_pas {
display: flex;
width: 90%;
height: 70px;
margin: 0 auto;
align-items: center;
.pas_logo{
width: 25px;
height: 25px;
position: absolute;
z-index: 1111;
}
:deep(.el-input .el-input__inner)::placeholder {
text-indent: 20px;
color: rgb(95, 40, 74);
/* 設定縮進的距離，根據需要進行調整 */
}
}
.input_valiCode{
display: flex;
width: 90%;
height: 80px;
margin: 0 auto;
align-items: center;
:deep(.el-input ) {
width: 200px;
/* 設定縮進的距離，根據需要進行調整 */
}
:deep(.el-input .el-input__inner)::placeholder {
// text-indent: 20px;
color: rgb(95, 40, 74);
/* 設定縮進的距離，根據需要進行調整 */
}
}
.commit{
display: flex;
justify-content: center;
:deep(.el-button) {
width: 150px;
/* 設定縮進的距離，根據需要進行調整 */
}
}
}
}
}</style>
這里是使用elementUI的組件，所以需要安裝element-ui
npm install element-plus --save
安裝scss
npm i sass sass-loader --save-dev
驗證碼組件請參考我之前的文章---->vue3+vite+ts驗證碼組件
常見問題
1.視頻地址
視頻地址不可以直接在src里引入，需要定義變量傳入，例如const vurl = ref('../src/assets/test.mp4')
2.vue打包視頻不會將視頻，需要上傳至服務器
3.視頻加載很慢，卡頓建議使用對象存儲將視頻文件上傳使用在線地址減少服務器壓力
最終效果圖：
效果預覽地址：點這里文章來源：http://www.zghlxwxcb.cn/news/detail-615701.html
后續(xù)優(yōu)化
輸入框提示，登錄動畫，主題色
持續(xù)更新~文章來源地址http://www.zghlxwxcb.cn/news/detail-615701.html
到了這里，關于vue3+vite+ts視頻背景酷炫登錄模板【英雄聯盟主題】的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
