最近我准备在自己的网站上开发一个博客系统,首先要实现后台登录界面。我选择使用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);
如果在使用过程中出现了找不到声明模块的错误,你可以创建一个以.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)
- muted(静音,默认值:true)
- preload(预加载,默认值:auto)
- 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打包视频不会将视频,需要上传至服务器
3.视频加载很慢,卡顿建议使用对象存储将视频文件上传使用在线地址减少服务器压力
最终效果图:
效果预览地址:点这里文章来源:https://www.toymoban.com/news/detail-615701.html
后续优化
输入框提示,登录动画,主题色
持续更新~文章来源地址https://www.toymoban.com/news/detail-615701.html
到了这里,关于vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!