1. Python技术站首页
  2. 其他
  3. Vue

关于vue3使用particles粒子特效的问题

• Vue

要在Vue 3中使用Particles粒子特效，可以使用第三方库particles.js。下面是完整的攻略：

1. 安装particles.js

可以使用npm安装particles.js。

npm install particles.js --save

2. 导入和配置particles.js

在vue的配置文件中（main.js或者App.vue），导入particles.js并进行配置。这里以main.js为例。

import Particles from 'particles.js'

// 设置配置项
const ParticlesConfig = {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: '#000000'
    },
    shape: {
      type: 'circle',
      stroke: {
        width: 0,
        color: '#000000'
      },
      polygon: {
        nb_sides: 5
      },
    },
    opacity: {
      value: 0.5,
      random: false
    },
    size: {
      value: 5,
      random: true
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: '#000000',
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 6,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      bounce: false,
      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
}

Vue.use(Particles, ParticlesConfig)

3. 使用particles.js

之后，可以在需要的页面中加入一个带有id属性的div，并在vue的组件中使用ref找到这个元素。

<div id="particles"></div>

<template>
  <div>
    <div id="particles" ref="particles">
      This is particles.js
    </div>
  </div>
</template>
<script>
export default {
  mounted () {
    this.initParticles()
  },
  methods: {
    initParticles () {
      // 找到包含particles.js特效的div
      let particlesDiv = this.$refs.particles

      // 初始化particles.js特效
      particlesJS(particlesDiv, {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
          },
          "opacity": {
            "value": 0.5,
            "random": false
          },
          "size": {
            "value": 5,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "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>

4. 示例

下面是两个使用particles.js的实例。

示例1

<template>
  <div>
    <div id="particles" ref="particles"></div>
    <div class="content">
      <h1>Hello, particles!</h1>
      <p>A lovely day isn't it?</p>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.initParticles()
  },
  methods: {
    initParticles () {
      let particlesDiv = this.$refs.particles

      particlesJS(particlesDiv, {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
          },
          "opacity": {
            "value": 0.5,
            "random": false
          },
          "size": {
            "value": 5,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "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>
#particles {
  position: absolute;
  width: 100%;
  height: 100vh;
}
.content {
  text-align: center;
  margin-top: 200px;
  color: #ffffff;
}
</style>

这个例子中，particles.js在整个页面的背景上添加了特效，并在页面内容上方添加了一个白色区块。

示例2

<template>
  <div>
    <div class="avatar">
      <div id="particles" ref="particles"></div>
      <img src="./assets/avatar.png" />
    </div>
    <div class="content">
      <h1>Hello, particles!</h1>
      <p>A lovely day isn't it?</p>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.initParticles()
  },
  methods: {
    initParticles () {
      let particlesDiv = this.$refs.particles

      particlesJS(particlesDiv, {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
          },
          "opacity": {
            "value": 0.5,
            "random": false
          },
          "size": {
            "value": 5,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "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>
.avatar {
  text-align: center;
  margin-top: 50px;
}
.avatar img {
  width: 200px;
  border-radius: 50%;
  border: 5px solid #ffffff;
}
#particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.content {
  text-align: center;
  margin-top: 50px;
  color: #ffffff;
}
</style>

这个例子中，particles.js在头像图片背景上添加了特效，并在页面下方添加了一个白色区域。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于vue3使用particles粒子特效的问题 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • ant-design-vue 快速避坑指南(推荐)

    Ant Design Vue 快速避坑指南 Ant Design Vue 是一款基于 Vue.js 的 UI 组件库，它提供了许多丰富的组件，如按钮、表单、弹窗等等。使用 Ant Design Vue 可以大大缩短前端开发时间，但是使用过程中也会遇到一些坑点，本文将介绍 Ant Design Vue 的使用指南及避坑秘籍。 安装 要使用 Ant Design…

    Vue 2023年5月28日
    00

  • vue关于重置表单数据出现undefined的解决

    关于重置表单数据出现undefined的问题，我们可以进行如下的解决方式： 问题原因 首先，我们需要明确这个问题的原因。在 Vue 中，我们重置表单数据通常使用 Object.assign 或者展开操作符 … 来将一个空对象里的数据覆盖当前表单组件里的数据。常见代码如下： // resetFormData 方法里重置formData数据 resetFor…

    Vue 2023年5月27日
    00

  • Vue中引入样式文件的方法

    当我们使用Vue框架来构建前端应用时，经常需要引入样式文件来美化页面样式。在Vue中引入样式文件的方法有以下几种： 引入全局样式文件 我们可以将全局样式文件引入到Vue项目的入口文件（比如main.js文件）中。这样可以让这些样式在所有Vue组件中都可用。 // main.js文件 import Vue from "vue"; impor…

    Vue 2023年5月28日
    00

  • 浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    下面是关于“浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定”的完整攻略： 1. 什么是v-model v-model是Vue.js中一个重要的指令，它被用于在表单及自定义组件中，快速实现双向数据绑定。尽管双向数据绑定在Vue.js中已经非常容易实现，但是v-model更进一步简化了该过程的操作。 v-mo…

    Vue 2023年5月28日
    00

  • vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为

    Vue.js是一种基于组件的JavaScript框架，使用它可以快速地构建Web应用程序，并且在处理用户交互时会涉及到许多事件。在Vue.js中，使用 v-on:click 事件指令来监听用户单击按钮和其他DOM元素的事件。在本攻略中，我们将讨论 v-on:click 事件的事件对象，事件冒泡以及事件默认行为。 事件对象 当使用v-on:click事件指令时…

    Vue 2023年5月28日
    00

  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用 Vue中的数据监听方法 watch 可以用于监听数据的变化并做出响应。在该攻略中，我们将详细介绍 watch 的基本概念、用法以及示例代码。 基本概念 在Vue中，使用 watch 可以监听到一个数据的变化，并做出响应。watch 有两个参数：要监听的数据，以及监听数据变化后要执行的回调函数。当监听的数据发生变化时，Vue…

    Vue 2023年5月27日
    00

  • Vue项目使用svg图标实践

    Vue项目使用SVG图标实践 本文主要介绍在Vue项目中如何使用SVG图标，并提供两个示例说明。 集成SVG图标 安装svg-sprite-loader svg-sprite-loader将svg文件打包成单个svg sprite，该svg sprite可以通过样式或相关API的方式在您的应用程序中使用。 npm install svg-sprite-loa…

    Vue 2023年5月27日
    00

  • 在vue中axios设置timeout超时的操作

    当使用axios在Vue中进行数据请求时，可能会遇到服务器响应非常缓慢或者出现网络问题等情况，由此导致前端请求一直在等待响应，造成用户体验不佳。为了解决这类问题，我们可以通过设置axios的timeout超时时间来规定前端在等待响应的最大时间，如果超过这个时间则取消请求，并且返回一个错误提示。 下面是设置axios timeout的完整攻略和两条示例说明： …

    Vue 2023年5月29日
    00
合作推广
合作推广
分享本页
返回顶部