vue.js实现红包雨

最新推荐文章于 2025-06-14 22:37:08 发布

原创

最新推荐文章于 2025-06-14 22:37:08 发布 · 置顶 · 5.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js实现红包雨

看了好多实现红包雨的案例，但好像还没有vue实现红包雨的，所以我来实现下，测试过了，兼容性很好，接下来直接po代码啦
index.vue

<template>
    <div class="">
       <div id="redzone">
       </div>
    </div>
</template>

<script>
import jQuery from 'jquery'
export default {
    name:'hongbao',
    data () {
        return {
          
        }
    },
    computed:{
  
    },
methods:{
      addBao:function(left, height, src) {
        var div = document.createElement("div");
        var img = document.createElement("img");
        div.appendChild(img);
        img.className = "roll";
        img.src = src;
        div.style.left = left + "px";
        div.style.height = height + "px";
        div.className = "redBox";
        document.getElementById("redzone").appendChild(div);
        setTimeout(function() {
            document.getElementById("redzone").removeChild(div);
            // console.log(