Vue实现弹幕功能

功能

代码

<template>
  <el-container>
    <el-header>
      <el-card style="display: flex;justify-content:center;text-align: center;width: 70%;margin: 0 auto">
      <h1 >欢迎来吐槽</h1>
      </el-card>
    </el-header>
    <el-main >
    <el-card style="width: 70%;background: #6225E6;margin: 50px auto ;height:100%;">
    <div >
      <!-- 弹幕组件 -->
      <vue-danmaku class="danmu" v-model="danmutext" loop fontSize:50px style="height:200px; width:1500px;font-size: 50px"></vue-danmaku>
    </div>
    <!-- 输入框和发送按钮 -->
    <div className="input-container" style="text-align: center;">
      <input class="input__field input__field--haruki" type="text" id="input-1" v-model="inputText" style="margin-bottom: 20px"/>
      <button class="button" @click="sendDanmu">发送</button>
    </div>
    </el-card>
    </el-main>
  </el-container>
</template>

<script>
import  vueDanmaku from 'vue-danmaku'
export default {
  components: {
    vueDanmaku
  },
  data() {
    return {
      // 弹幕列表
      danmus: [],
      danmutext:[],
      // 输入框绑定的文本
      inputText: ''
    };
  },
  mounted() {
    this.getDanmu();
  },
  methods: {
    // 发送弹幕的方法
    sendDanmu() {
      if (this.inputText.trim() !== '') {
        this.$request.post('/liuyanban/add', {
          text: this.inputText
        }).then(res => {
          this.getDanmu();
        })
        // 清空输入框
        this.inputText = '';
      }
    },
    getDanmu(){
      this.$request.get('/liuyanban/selectAll').then(res => {
        this.danmus = res.data;
        this.danmus.forEach(item => {
          //讲text push到danmu列表
          this.danmutext.push(item.text);
        })
      })
    }

  }
};
</script>

<style>
.damu{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  white-space: pre-line;
  line-height: 22px;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 15px;
}
.input-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px; /* 根据需要调整间距 */
}

/* 确保input和button在一行显示，并且居中对齐 */
.button {
  margin: 0 10px; /* 根据需要调整间距 */

  cursor: pointer;
  display: flex;
  padding: 11px 33px;
  text-decoration: none;
  font-family: Poppins, sans-serif;
  font-size: 25px;
  color: #fff;
  transition: 1s;
  box-shadow: 6px 6px #000;
  transform: skew(-15deg);
  border: none;
  background: #6225E6;
  justify-content: center;
}



.text {
  flex: 1;
  padding: 10px 50px 10px 10px;
  position: relative;
  background-color: transparent;
  height: 100%;
  box-shadow: none;
  border: none;
  resize: none;

}
/* 打印效果 */
@keyframes typing {
  from { width: 0; }
  to { width: 15em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
  from, to { box-shadow: 1px 0 0 0 transparent; }
  50% { box-shadow: 1px 0 0 0; }
}

.input--haruki {
  margin: 4em 1em 1em;
}

.input__field--haruki {
  padding: 0.4em 0.25em;
  width: 100%;
  background: transparent;
  color: #AFB5BB;
  font-size: 1.55em;
}

.input__label--haruki {
  position: absolute;
  width: 100%;
  text-align: left;
  pointer-events: none;
}

.input__label-content--haruki {
  transition: transform 0.3s;
}

.input__label--haruki::before,
.input__label--haruki::after {
  content: '';
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 4px;
  background: #6a7989;
  transition: transform 0.3s;
}

.input__label--haruki::before {
  top: 0;
}

.input__label--haruki::after {
  bottom: 0;
}

.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
  transform: translate3d(0, -90%, 0);
}

.input__field--haruki:focus + .input__label--haruki::before,
.input--filled .input__label--haruki::before {
  transform: translate3d(0, -0.5em, 0);
}

.input__field--haruki:focus + .input__label--haruki::after,
.input--filled .input__label--haruki::after {
  transform: translate3d(0, 0.5em, 0);
}
</style>