Vue【vue-seamless-scroll】滚动组件及注意事项

一、运用场景：VUE开发的项目中需要表格滚动展示信息

二、组件：vue-seamless-scroll

三、使用：通过ul标签+css样式模拟表格，表头+表数据

安装

npm install vue-seamless-scroll --save

在main.js中引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll) // 滚动

在.vue页面中使用

<div class="tableBox">
   <p class="tableHeader">
     <span>等级</span>
     <span>名称</span>
   </p>
   <vue-seamless-scroll :data="warningData" :class-option="optionHover">
     <ul class="waringBox">
       <li v-for="item in warningData" :key="item.alarmId">
         <span>{{ item.alarmLevel }}</span>
         <span :title="item.alarmName">{{ item.alarmName }}</span>
       </li>
     </ul>
   </vue-seamless-scroll>
</div>

在实际运用中，一般会加上点击事件，会出现点击失效的问题。
那么，需要在上面的基础上，最外层加上点击事件，在span中绑定data数据。

<div class="tableBox" @click="goDetail($event)">
   <p class="tableHeader">
     <span>等级</span>
     <span>名称</span>
   </p>
   <vue-seamless-scroll :data="warningData" :class-option="optionHover">
     <ul class="waringBox">
       <li v-for="item in warningData" :key="item.alarmId">
         <span>{{ item.alarmLevel }}</span>
         <span :data-obj="JSON.stringify(item.alarmId)" :title="item.alarmName">{{ item.alarmName }}</span>
       </li>
     </ul>
   </vue-seamless-scroll>
</div>

<script>
export default {
  name: "ScrollTable",
  data() {
	warningData: [
		{ alarmId: 1, alarmLevel: "紧急", alarmName: "告警一"},
		{ alarmId: 2, alarmLevel: "紧急", alarmName: "告警二"},
		{ alarmId: 3, alarmLevel: "一般", alarmName: "告警3"},
		{ alarmId: 4, alarmLevel: "严重", alarmName: "告警4"},
		{ alarmId: 5, alarmLevel: "提示", alarmName: "告警5"},
		{ alarmId: 6, alarmLevel: "其它", alarmName: "告警6"},
		{ alarmId: 7, alarmLevel: "提示", alarmName: "告警7"},
		{ alarmId: 8, alarmLevel: "其它", alarmName: "告警8"}
	]
  },
  computed: {
    // 表格滚动效果；
    optionHover() {
      return {
        step: 0.4, // 0.5 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
	},
  },
  methods: {
    goDetail(e) {
      //打印出来的e.target就是点击的span元素
      //拿到span元素身上的自定义属性obj , obj本身是字符串, JSON.parse转成对象
      let alarmId = JSON.parse(e.target.dataset.obj);
      console.log(alarmId); // 打印 alarmId
    },
  }
}

<style lang="sass" scoped>
.tableBox{
  width: 200px;
  height: 300px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  .tableHeader{
    position: relative;
    z-index: 10;
    display: flex;
    color: #333;
    margin: 0;
    padding: 6px;
    background: #e7e7e7;
    span{
      display: inline-block;
      text-align: center;
    }
    span:nth-child(1){
      width: 48px;
    }
    span:nth-child(2){
      flex: 1;
    }
  }
  ul.waringBox{
    margin-bottom: 0;
    li{
      display: flex;
      margin-bottom: 0;
      padding: 2px;
      border-top: 1px solid #e8e8e8;
      span{
        display: inline-block;
        text-align: center;
      }
      span:nth-child(1){
        width: 44px;
      }
      span:nth-child(2){
        flex: 1;
        cursor: pointer;
        white-space: nowrap; //强制文本在一行内输出
        overflow: hidden; //隐藏溢出部分
        text-overflow: ellipsis; //对溢出部分加上...
      }
    }
  }
}
</style>