vue3弹幕

效果图

 

<template>
  <div class="build-page">
    <div class="mivebidss">
      <div class="mive-box" ref="listbox">
        <div
          :style="item.style"
          v-for="(item, index) in buildList.list"
          :key="index"
          >{{ item.text }}</div>
      </div>
    </div>
    <div class="input-build">
      <input type="text" v-model="buildText" placeholder="发表你的弹幕吧！" @keyup.enter="sendBuild" />
      <button @click="sendBuild">发送</button>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from "vue";
export default {
  setup() {
    let { buildText, buildList, sendBuild, listbox, times } = buildFan();
    return { buildText, buildList, sendBuild, listbox, times };
  },
};
function buildFan() {
  const buildText = ref("");
  const buildList: any = reactive({
    list: [],
  });
  const listbox = ref();
  let times:any = ref(null);
  let boxHeight: number;
  onMounted(() => {
    boxHeight = listbox.value.offsetHeight;
  });
  function sendBuild() {
    if (buildText.value != "") {
      buildList.list.push({
        text: buildText.value,
        style: {
          top: Math.random() * (boxHeight - 30 - 0) + 0 + "px",
          color: "#" + Math.random().toString(16).substr(2, 6).toUpperCase(),
          fontSize: Math.floor(Math.random() * (30 - 12) + 12) + "px",
          left: 600 + "px",
          setLefr: 600,
        },
      });
      if (times) clearInterval(times);
      times = setInterval(function () {
        for (let i = 0; i < buildList.list.length; i++) {
          buildList.list[i].style.setLefr -= Math.random() * 5 + 1;
          buildList.list[i].style.left = buildList.list[i].style.setLefr + "px";
          if (buildList.list[i].style.setLefr < -400) {
            buildList.list.splice(i, 1);
            i--;
          }
          if (buildList.list.length < 1) {
            clearInterval(times);
            times = null;
          }
        }
      }, 17);
    } else {
      buildText.value = "";
    }
    buildText.value = "";
  }

  return { buildText, buildList, sendBuild, listbox, times };
}
</script>

<style scoped>
.build-page {
  height: 100%;
  width: 100%;
}
.mivebidss {
  width: 600px;
  height: 350px;
  margin: 0 auto;
  background-color: oldlace;
  margin-bottom: 10px;
}
.mive-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mive-box > div {
  position: absolute;
  left: 700px;
  overflow: hidden;
}
.input-build {
  display: flex;
  width: 600px;
  margin: 0 auto;
}
.input-build > input {
  flex: 1;
}
</style>