vue 登录页面背景 - 动态粒子特效包括vue3使用 (Vue-Particles)

图中的点和线，是由Vue-Particles生成的，不仅自己动，还可以与用户的鼠标互动。例子的样式有点丑，希望能帮助大家，布局有点丑，大家凑活看吧

1、安装教程

npm install vue-particles --save-dev

2、导入到 main.js 中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueParticles from 'vue-particles'  import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(ElementPlus).use(VueParticles).use(router).mount('#app')

3、使用方法

<template><div id="login"><vue-particlesclass="login-bg"color="#39AFFD":particleOpacity="0.7":particlesNumber="100"shapeType="circle":particleSize="4"linesColor="#8DD1FE":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles><div class="content"><el-formref="ruleFormss":model="ruleForm"status-icon:rules="rules"label-width="120px"class="demo-ruleForm"><el-form-item label="用户名" prop="pass" label-width="80px"><el-input v-model="ruleForm.pass"  autocomplete="off"></el-input></el-form-item><el-form-item label="密码" prop="checkPass" label-width="80px"><el-inputv-model="ruleForm.checkPass"type="password"autocomplete="off"></el-input>                  </el-form-item><el-form-item label="验证码" prop="age" label-width="80px"><p class="pp"><el-input v-model="ruleForm.age" class="inp"></el-input><img class="img" :src="'http://localhost:3000/imagecode?' + timer" alt="" @click="imgclick" /></p></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button><el-button @click="resetForm()">重 置</el-button></el-form-item></el-form></div></div>
</template><script>
import { reactive, toRefs, ref, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getlogin } from "../api";
import {useStore} from "vuex"
export default {name: "",setup() {const ruleFormss = ref(null);const store = useStore()const router = useRouter();const funmthod = reactive({submitForm() {ruleFormss.value.validate();let obj = {name: ruleForm.pass,pwd: ruleForm.checkPass,imgcode: ruleForm.age,};getlogin(obj).then((res) => {console.log(res);if (res.data.status === 200) {// console.log(res.data.data);store.dispatch("user/setmenus",res.data.data)// console.log)sessionStorage.setItem("toekn", res.data.token);router.push("/list");}});},imgclick() {// console.log(timer.value)timer.value = Date.now();},});const timer = ref(Date.now());const ruleForm = reactive({pass: "",checkPass: "",age: "",});const rules = {pass: [{ required: true, trigger: "blur", message: "用户名不能为空" }],checkPass: [{ required: true, trigger: "blur", message: "密码不能为空" }],age: [{ required: true, trigger: "blur", message: "验证码不能为空" }],};onBeforeMount(() => {});onMounted(() => {console.log("3.-组件挂载到页面之后执行-------onMounted");});return {ruleFormss,rules,router,store,ruleForm,timer,...toRefs(funmthod),};},
};
</script>
<style scoped lang='less'>
.el-input {margin-bottom: 15px;}
.pp{display: flex;align-items: center;justify-content: space-between;
}
.img{width: 100px;height: 50px;position: relative;top: -8px;
}
::v-v-deep .el-form-item{margin-bottom: 54px;
}
::v-deep .el-form-item__label{text-align:left; padding-left: 10px;
}
::v-deep .el-input__inner{width: 245px;// margin-right: 40px;// position: relative;
}
.content {width: 450px;height: 430px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto; /* 有了这个就自动居中了 */background: white;
}.login {width: 100%;height: 100%;background: yellowgreen;color: #cccccc;/*如果想做背景图片 可以给标签一个class 直接添加背景图*/background-image: url("/");position: relative;
}.login-bg {width: 100%;height: 100vh;background: #3e3e3e;
}
</style>

vue 登录页面背景 - 动态粒子特效包括vue3使用 (Vue-Particles)相关推荐

Canvas粒子交叉线条背景动态js特效
下载地址 Canvas粒子交叉线条背景动态特效,圆点鼠标经过连线交叉悬浮动画特效. dd:
vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
前端使用particlesjs实现背景的动态粒子特效
废话不多说,先上效果图: 这种动态的背景特效看似十分复杂,但制作起来其实非常简单. 我们这里借助了一个特效库叫做particles.js particles.js库的话我们可以从github网站下载到 ...
Vue动态粒子特效插件（背景线条吸附动画）
目录效果图: 一.安装: 二.引入 main.js 文件: 三.使用: 四.属性说明: 效果图: 一.安装: npm install vue-particles --save 二.引入 main.j ...
fastadmin后台login登录页面增加canvas粒子动画背景
地址演示地址登录 <!DOCTYPE html> <html> <head><link rel="stylesheet" media=&q ...
vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
Vue:单页面应用动态设置title
vue开发的单页面应用,需要在进入不同路由时动态改变title vue-cli 3 构建的项目 1.修改public>index.html 修改title标签id为:public_title,后 ...
Vue —— 登录页面按enter键触发登录按钮事件
如果是用elementui框架中的 el-input 组件,那就可以直接在该组件标签上使用@keyup.enter.native鼠标enter事件如果没有使用vue框架中的组件去写的button登录 ...

vue 登录页面背景 - 动态粒子特效包括vue3使用 (Vue-Particles)

1、安装教程

2、导入到 main.js 中

3、使用方法

vue 登录页面背景 - 动态粒子特效包括vue3使用 (Vue-Particles)相关推荐

最新文章

热门文章