no message

src/components/barrageContainer/barrageContainer.vue

@@ -72,6 +72,7 @@ export default {
     execute() {
       if (this.link.getLength() > 0) {
         this.currentData = this.link.head
+        this.parent = this.$refs.barrageContainer
         this.kg()
         this.dongtai()
         this.$nextTick(() => {
@@ -96,28 +97,33 @@ export default {
     },
     // 开始
     start() {
+      console.log(this.timeId, 'lllll')
       if (this.timeId) {
         clearTimeout(this.timeId)
       }
+
+      if (this?.currentData === this.link?.head) {
+        this.StartPointTime = new Date()
+      }
+
       // 上一个距离下一个的时间
-      var timeNum2 = Math.abs(
-        new Date(this.currentData?.next?.value?.time).getTime() - new Date(this.currentData?.value?.time).getTime()
-      )
-      // 获取间隔时间
-      var timenum =
-        this?.currentData?.next === this.link?.head
-          ? this.wheelTime
-          : timeNum2 > this.wheelTime
-          ? this.wheelTime
-          : timeNum2
+      if (this.currentData.value.time) {
+        var timenum = this.currentData.value.time
+      } else if (this?.currentData?.next === this.link?.head && document.getElementById(this.link?.head?.value?.id)) {
+        var timenum = Math.abs(this.wheelTime - Math.abs(new Date().getTime() - this.StartPointTime.getTime()))
+      } else {
+        var timenum = this.getRandomIntInRange(0, this.wheelTime / 2)
+      }
+
+      this.currentData.value.time = timenum
 
       // 删除之前的
       var node = document.getElementById(this.currentData?.value?.id)
       if (node) {
         node.parentNode.removeChild(node)
       }
-      // 追加新的元素
-      var parent = this.$refs.barrageContainer
+
+      // 创建新的元素
       var newChild = document.createElement('div')
       newChild.id = this.currentData?.value?.id
       newChild.className = 'barrage newBarrageChild'
@@ -128,41 +134,27 @@ export default {
       for (var key in this.barrageStyle) {
         newChild.style[key] = this.barrageStyle[key]
       }
-      newChild.style.animation = `moveRight ${this.wheelTime / 1000}s linear infinite`
+      newChild.style.animation = `moveRight ${this.wheelTime / 1000}s linear forwards`
       newChild.innerText =
         typeof this.currentData?.value?.text === 'function'
           ? this.currentData?.value?.text?.()
           : typeof this.currentData?.value?.text === 'string'
           ? this.currentData?.value?.text
           : this.currentData?.value?.id
-      parent.appendChild(newChild)
+
+      // 添加
+      this.parent.appendChild(newChild)
+
       // 赋值下一个数据为当前数据
       this.currentData = this.currentData.next
+
       // 定时器下一次执行追加
-      this.timeId = setTimeout(() => {
-        this.start()
-      }, timenum)
+      this.timeId = setTimeout(this.start, timenum)
     },
     // 获取随机高度
     getRandomIntInRange(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min
     },
-    // 生成uid
-    uid() {
-      let d = new Date().getTime()
-      let d2 = (performance && performance.now && performance.now() * 1000) || 0
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        let r = Math.random() * 16
-        if (d > 0) {
-          r = (d + r) % 16 | 0
-          d = Math.floor(d / 16)
-        } else {
-          r = (d2 + r) % 16 | 0
-          d2 = Math.floor(d2 / 16)
-        }
-        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
-      })
-    },
     dongtai() {
       // 创建一个 <style> 标签
       const style = document.createElement('style')

src/views/engineerFeeSettlement/dailyMaintenanceBalance/maintenanceSettlementDeduction/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <barrageContainer
+    ref="barrageContainer"
+    :wheelTime="10000"
+    :defaultBarrage="defaultBarrage"
+    :barrageStyle="{
+      border: '1px solid red',
+      'box-sizing': 'border-box',
+      padding: '5px',
+      background: 'lawngreen'
+    }"
+  >
+    <div>这是一个demo</div>
+    <el-button @click="tianjia">添加</el-button>
+    <el-button @click="execute">开始</el-button>
+    <el-button @click="close">关闭</el-button>
+  </barrageContainer>
+</template>
+
+<script>
+import barrageContainer from '@/components/barrageContainer/barrageContainer.vue'
+export default {
+  components: { barrageContainer },
+  data() {
+    return {
+      // 默认数据
+      // 对象中必要参数又id与time
+      // 默认以text为展示内容，text可以是文本或者是返回文本的函数。没有则展示id
+      defaultBarrage: [],
+      index: 0
+    }
+  },
+  methods: {
+    // 添加
+    tianjia() {
+      this.$refs.barrageContainer.push({
+        id: ++this.index
+        // time: new Date()
+      })
+    },
+    // 执行
+    execute() {
+      this.$refs.barrageContainer.execute()
+    },
+    // 关闭
+    close() {
+      this.$refs.barrageContainer.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>