图中的点和线，是由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>
