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

最新推荐文章于 2024-07-16 17:30:18 发布

看见还不错

最新推荐文章于 2024-07-16 17:30:18 发布

阅读量5.3k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61417250/article/details/121966840

版权

本文介绍了如何使用 Vue-Particles 库创建动态粒子背景，并实现与用户鼠标的交互效果。首先，通过 npm 安装 Vue-Particles，然后在 main.js 文件中导入并使用。接着展示了一个包含登录表单的示例，粒子背景在表单上方，当鼠标悬停或点击时，粒子会产生相应动态变化。最后，提供了完整的 Vue 代码示例，包括粒子效果的配置和表单验证功能。

摘要由CSDN通过智能技术生成

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