vue引入particles和触发提交问题

引入particles

安装依赖

npm i particles.js

创建公用组件

在components文件目录下创建ParticlesJS.vue组件

<template>
  <div id="particles-js"></div>
</template>

<script>
export default {
  name: "ParticlesJS",
  mounted() {
    require("particles.js");
    this.$nextTick(() => {
      this.initParticlesJS();
    });
  },

  methods: {
    initParticlesJS() {
      /* eslint-disable */
      particlesJS(
        "particles-js",

        {
          particles: {
            number: {
              value: 40,
              density: {
                enable: true,
                value_area: 800,
              },
            },
            color: {
              value: "#ffffff",
            },
            shape: {
              type: "circle",
              stroke: {
                width: 0,
                color: "#000000",
              },
              polygon: {
                nb_sides: 5,
              },
              image: {
                src: "img/github.svg",
                width: 100,
                height: 100,
              },
            },
            opacity: {
              value: 0.5,
              random: false,
              anim: {
                enable: false,
                speed: 1,
                opacity_min: 0.1,
                sync: false,
              },
            },
            size: {
              value: 5,
              random: true,
              anim: {
                enable: false,
                speed: 40,
                size_min: 0.1,
                sync: false,
              },
            },
            line_linked: {
              enable: true,
              distance: 150,
              color: "#ffffff",
              opacity: 0.4,
              width: 1,
            },
            move: {
              enable: true,
              speed: 3,
              direction: "none",
              random: false,
              straight: false,
              out_mode: "out",
              attract: {
                enable: false,
                rotateX: 600,
                rotateY: 1200,
              },
            },
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: true,
                mode: "repulse",
              },
              onclick: {
                enable: true,
                mode: "push",
              },
              resize: true,
            },
            modes: {
              grab: {
                distance: 400,
                line_linked: {
                  opacity: 1,
                },
              },
              bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3,
              },
              repulse: {
                distance: 200,
              },
              push: {
                particles_nb: 4,
              },
              remove: {
                particles_nb: 2,
              },
            },
          },
          retina_detect: true,
        }
      );
    },
  },
};
</script>

<style scoped>
//此处根据自己需求，进行改写
#particles-js {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
}
</style>

全局引入组件

在main.js中引入ParticlesJS

import Vue from 'vue'
import App from './App'
import router from './router'

import ParticlesJs from './components/ParticlesJS.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { ParticlesJs },
  render: h => h(App)
})

引入所需组件中

我在项目中是用在了登录页面

<template>
	<div class="login">
	</div>
	<particles-js></particles-js>
</template>

<script>
import ParticlesJs from '../../components/ParticlesJS';
export default {
  name: "Login",
  components: {ParticlesJs},
  .....
}

完成以上操作动态粒子效果就能呈现了。但是因为我是在登录页面，所以还会有form表单的填写和提交，这时就会发现鼠标点击的触发功能只能影响ParticlesJS的功能，但对表单点击无法填写和提交。
尝试了其他教程里说的更改position:relative，无法解决问题 。
后来尝试了下面的方法：

鼠标触发bug

<template>
	<div class="login">
		<div class="a">
		    <el-form :model="loginForm" class="login-form">
	          <el-form-item>
	            <el-input
	              style="width: 300px"
	              prefix-icon="el-icon-user-solid"
	              v-model="loginForm.username"
	              placeholder="请输入您的用户名"
	            ></el-input>
	          </el-form-item>
	          <el-form-item>
	            <el-input
	              style="width: 300px"
	              prefix-icon="el-icon-unlock"
	              v-model="loginForm.password"
	              placeholder="请输入您的密码"
	            ></el-input>
	          </el-form-item>
	
	          <a @click="toLogin" class="animsition-link submit">登录</a>
	        </el-form>
		</div>
	</div>
	<particles-js></particles-js>
</template>

对form表单外套一层div，定义class为a。
particles-js 和 a处于同一层级的div。
定义 a 和 particles-js 的css，关键元素为z-index。

.a{
  height: 100%;
  position: relative;
  z-index: 2;
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
}

官方对z-index的定义为该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

所以将form元素放置于particles元素之前，则能实现form表单的事件（ps：我的项目前提是动态粒子特效只作为一个动画效果，不应用其自身的触发事件）。

particles的配置项

键值	参数选项/ 说明	实例
particles.number.value	number 数量	40
particles.number.density.enable	boolean	true / false
particles.number.density.value_area	number 区域散布密度大小	800
particles.color.value	HEX (string) RGB (object) HSL (object) array selection (HEX) random (string) 原子的颜色	“#b61924” {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", “#333333”, “999999”] “random”
particles.shape.type	string array selection 原子的形状	“circle” “edge” “triangle” “polygon” “star” “image” [“circle”, “triangle”, “image”]
particles.shape.stroke.width	number 原子的宽度	2
particles.shape.stroke.color	HEX (string) 原子颜色	“#222222”
particles.shape.polygon.nb_slides	number 原子的多边形边数	5