vue3 vue-seamless-scroll

main.ts

// @ts-ignore
import scroll from "vue-seamless-scroll/src";
app.use(scroll)

引用

<template>
  <div class="give_an_alarm">
    <div class="level_title">
      <div class="top_level"></div>
      <span>告警日志</span>
      <div class="bottom_level"></div>
    </div>
    <div class="give_an_alarm_info">
      <div>
        <div class="tr_alarm">
          <div class="info_date fl tc">日期</div>
          <div class="info_type fl tc border_decorate">类型</div>
          <div class="info_level fl tc border_decorate">等级</div>
          <div class="info_area fl tc border_decorate">区域</div>
          <div class="info_number fl tc border_decorate">设备编号</div>
          <div class="info_temperature fl tc border_decorate">实时温度</div>
          <div class="info_threshold fl tc border_decorate">超出阈值</div>
          <div class="info_status fl tc border_decorate">状态</div>
        </div>
      </div>
<!--      <el-scrollbar class="give_an_alarm_info_ul">-->
      <vue-seamless-scroll :data="the_alarm_log"   :class-option="optionHover" class="seamless-warp give_an_alarm_info_ul">
        <ul class="content">
          <li v-for="(val, key) in the_alarm_log">
            <div class="info_date">{{ val[ 'time' ] }}</div>
            <div class="info_type">{{ val[ 'type' ] }}</div>
            <div class="info_level">{{ val[ 'alarm_level' ] }}</div>
            <div class="info_area">{{ val[ 'region_name' ] }}</div>
            <div class="info_number">{{ val[ 'd_code' ] }}</div>
            <div class="info_temperature">{{ val[ 'monitor_value' ] }}</div>
            <div class="info_divreshold">{{ val[ 'warning_dit' ] }}</div>
            <div class="info_status statusColor">{{ val[ 'status' ] }}</div>
          </li>
        </ul>
      </vue-seamless-scroll>
<!--      </el-scrollbar>-->
    </div>
  </div>
</template>

<script>
import {theAlarmLog} from "../assets/js/api";
export default {
  data () {
    return {
      the_alarm_log:[]
    };
  },
  created() {
    //告警日志
    theAlarmLog().then(({data: {data}}) => {
      this.the_alarm_log = data
    })
  },
  computed: {
    optionHover () {
      return {
        // openWatch: true;
         step: 0.8,  //数值越大速度滚动越快
        //   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        //   direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        //   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};



</script>

<style scoped>
.info_number{
  /*white-space: nowrap;*/
  /*overflow: hidden;*/
  /*text-overflow:ellipsis;*/
}
</style>

ScrollBoard.vue

<template>
  <div>
    <div>
      <div>
        <div>
          <vue-seamless-scroll :data="listData"   :class-option="optionHover" class="seamless-warp">
            <ul class="item">
              <!--              //这一句在我的vue版本是必须的，用来防止eslint的检测错误-->
              <!-- eslint-disable-next-line vue/require-v-for-key -->
              <li v-for="item in listData">
                <div class="deviceClass" @mouseenter="immigration(data)" @mouseleave="shiftOut(data)">
                  <div class="deviceImg">
                    <img :src="imgHover"  >
                  </div>
                  <div class="deviceTitle">
                    <div class="deviceFont">
                      <div class="devLabel">
                        {{ item.title }}
                      </div>
                      <div class="devCode">
                        {{ item.date }}
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgHover: require('../assets/img/cameraIconSmallHover.png'),
      imgPath: require('../assets/img/cameraIconSmall.png'),
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
    };
  },
  computed: {
    optionHover () {
      return {
        // openWatch: true;
        //  step: 0, // 数值越大速度滚动越快
        //   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        //   direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        //   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 10000000 // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.seamless-warp {
  height: 288px;
  padding: 0 10px;
  overflow: hidden;
  .item{
    li{
      .deviceClass {
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #082c51;
        border-right: none;

        .deviceTitle {
          padding-top: 3px;
          margin-left: 10px;
          color: rgb(123, 152, 188);
          font-size: 14px;

          .deviceFont {
          }
        }

        .deviceImg {
          margin-top: 2px;
        }

        &:hover {
          .deviceTitle{
            color: #fff !important;
          }
          border-image: linear-gradient(to left, rgba(59, 151, 208, 0), #3b97d0 60%) 1;
          background-image: -webkit-linear-gradient(left, rgba(0, 145, 223, 0.25) 0, rgba(0, 145, 223, 0) 80%);
        }
      }
    }
  }
}
</style>