最近、Web サイト上にブログ システムを開発することになり、まずバックグラウンド ログイン インターフェイスを実装する必要があります。私は Vue 3 + Vite + TypeScript フレームワークを使用して構築することにしました。このトピックの詳細な手順は次のとおりです。
Web ページの背景画像としてビデオを使用することは非常に一般的であり、インターネット上には関連するプラグインが多数あります。この機能には「vue-sensitive-video-background-player」プラグインを使用することにしました。
まず、次のコマンドを使用してプラグインをインストールする必要があります。
npm install vue-responsive-video-background-player
プラグインを Vue アプリケーションにインポートして登録する 2 つの異なる方法を次に示します。
コンポーネントとして:
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);
使用中に宣言モジュールが見つからないというエラーが発生した場合は、サフィックス .d.ts が付いた新しいファイルを作成し、次の内容を追加できます。
declare module 'vue-responsive-video-background-player'{
const content: any
export = content
}
これにより、宣言モジュールが見つからない問題が解決されます。
ビデオコンポーネントを作成する
<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)
- ミュート (ミュート、デフォルト値: true)
- プリロード (プリロード、デフォルト: 自動)
- objectFit (コンテナにフィット、デフォルト: cover|fill|contain)
コンポーネント構成の詳細については、vue-responsive-video-background-playerドキュメントを参照してください。
コンポーネントを使用する
//创建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 パッケージ化されたビデオは
ビデオをサーバーにアップロードしません。ファイルのアップロードでは、サーバーの負荷を軽減するためにオンライン アドレスが使用されます。
最終的なレンダリング:
エフェクトプレビューのアドレス:ここをクリックしてください
その後の最適化
入力ボックスのプロンプト、ログインアニメーション、テーマカラーは
継続的に更新されます~