vue插件 自动滚动插件-vue-seamless-scroll

工程引入

yarn add vue-seamless-scroll

组件引入插件

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
    vueSeamlessScroll
}

使用

<div class="warning">
        <vue-seamless-scroll
            :data="warningData"
            :class-option="classOption"
        >
          <div class="rows" v-for="(item, index) in warningData" :key="index">
            <div class="col" :style="`color: ${item.color}`">
              <span class="iconfont icon-jinggao_o"></span>
              <span>{{ item.info }}</span>
            </div>
            <div class="col" style="text-align: right;color: #ffffff">4/2 15:20</div>
          </div>
        </vue-seamless-scroll>
      </div>

data () {
   return {
   classOption: {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      },
   warningData: [{
        info: '有人员进入危险区域',
        color: 'red'
      }, {
        info: '六楼应急照明设备发生故障',
        color: 'orange'
      },
        {
          info: '有人员进入危险区域',
          color: 'red'
        },
        {
          info: '六楼应急照明设备发生故障',
          color: 'orange'
        }, {
          info: '有人员进入危险区域',
          color: 'red'
        }, {
          info: '有人员进入危险区域',
          color: 'red'
        }, {
          info: '六楼应急照明设备发生故障',
          color: 'orange'
        }, {
          info: '有人员进入危险区域',
          color: 'red'
        }, {
          info: '六楼应急照明设备发生故障',
          color: 'orange'
        }, {
          info: '有人员进入危险区域',
          color: 'red'
        }]
    }
}

.warning {
      overflow: auto;
      height: 17rem;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }

vue3版本

1.

yarn add vue3-seamless-scroll

2.

<template>
<vue3-seamless-scroll class="table tableH" :list="data_1" :class-option="classOption">
            <table class="w-full" cellpadding="5px">
              <tbody>
              <tr v-for="(item, index) in data_1" :key="index">
                <th>{{ item.v0 }}</th>
                <th>{{ item.v1 }}</th>
                <th>{{ item.v2 }}</th>
                <th>{{ item.v3 }}</th>
              </tr>
              </tbody>
            </table>
          </vue3-seamless-scroll>
</template>
<script setup>

import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
let data_1 = [{
  v0: 1,
  v1: '湘C7Z9G0',
  v2: '16:12',
  v3: '30分钟'
}]
let classOption = {
  step: 0.4, // 数值越大速度滚动越快
  limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: true, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  openWatch: true, // 开启数据实时监控刷新dom
  singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 2000
};
</script>