图中的点和线,是由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-particles
class="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-form
ref="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-input
v-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>