vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决

背景

最近再做一个大屏项目,需要用到表格滚动效果,之前自己写过js实现,最近发现一个组件vue-seamless-scroll可以实现滚动,感觉挺方便的,准备用一下,但是用完之后才发现这个组件有很多坑需要解决.我把用法和一些问题的解决方法记录一下.

需求

实现表格滚动效果,表格中过长的是文字需要悬停展示,点击每行弹出详情弹框,数据每分钟更新一次.

安装vue-seamless-scroll

npm install vue-seamless-scroll --save　　

引入组件

<vue-seamless-scroll></vue-seamless-scroll>
 
import vueSeamlessScroll from 'vue-seamless-scroll'
 
components: {
        vueSeamlessScroll
},　

配置参数

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    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)
                }
            }
 
        },　　

上边的安装使用很简单,大家可以官方文档看看.
刚开始我还觉得这个组件很好用,可是后来现实改变了我的想法.

遇到的问题

我把项目代码放上,便于下边问题描述,这是最终代码

html

<div class="table_box">
        <div class="heared">
          <div
            :class="item.className"
            v-for="(item,index) in headerList"
            :key="index"
            :style="'width:'+item.width+'px'"
          >
            {{item.title}}
          </div>
        </div>
        <div class="scrollBox" @click="clickHang($event)">
          <div ref="vc-tooltip" style="position: absolute;display: none" class="tooltip-box"></div>
          <vue-seamless-scroll
            @mouseover.native="handleMouseover($event)"
            @mouseout.native="handleMouseout($event)"
            :data="tableData"
            :class-option="classOption"
            class="warp"
            @ScrollEnd="scrollEndEvent"
            v-if="scrollFlag"
          >
            <div class="tableCont" ref="tableCont">
              <div class="hangBox" v-for="(item,index) in tableData" :key="index" :data-obj="JSON.stringify(item)">
                <div class="hang">
                  <div class="caseLevel">
                    <span class="table-content" :data-obj="JSON.stringify(item)">{{item.caseLevel}}</span>
                  </div>
                  <div class="caseType">
                    <span :data-obj="JSON.stringify(item)">{{getCaseType(item.caseType)}}</span>
                  </div>
                  <div class="receiveCaseTime">
                    <span :data-obj="JSON.stringify(item)">{{formatDate(item.receiveCaseTime)}}</span>
                  </div>
                  <div class="caseSummary">
                    <span class="table-content" :data-obj="JSON.stringify(item)">{{item.caseSummary}}</span>
                  </div>
                </div>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>

js

data() {
    return {
      headerList: [
        { id: 1, title: '级别', className: 'caseLevel', width: 60 },
        { id: 2, title: '类型', className: 'caseType', width: 100 },
        { id: 3, title: '时间', className: 'receiveCaseTime', width: 100 },
        { id: 4, title: '概要', className: 'caseSummary', width: 130 }
      ],
      classOption: {
        direction: 1, //滚动方向
        step: 0.5, //滚动速度  越打越快
        singleHeight: 28, //滚动距离
        limitMoveNum: 6
      },
    }
  },
...
clickHang($event) {
      if ($event.target.dataset) {
        const item = JSON.parse($event.target.dataset.obj)
        console.log(item )
        //去打开弹框
      }
    },
    handleMouseover(el) {
      //判断el是否在content的`<td>`标签上
      if (el.target.className.includes('table-content')) {
        el.target.style.cursor = 'pointer'
        //el所在div的transform在y轴上的移动px
        let h = parseFloat(
          this.$refs['tableCont'].parentElement.parentElement.style.transform
            .replaceAll('translate(0px,', '')
            .replace('px)', '')
        )
        //显示div
        this.$refs['vc-tooltip'].style.display = ''
        this.$refs['vc-tooltip'].innerHTML = el.target.innerHTML
        this.$refs['vc-tooltip'].style.left = el.target.offsetLeft - this.$refs['vc-tooltip'].offsetWidth / 2 + 'px'
        //判断el所在的div后面是否有元素，有则为第一个div
        // if (el.target.parentElement.parentElement.parentElement.nextSibling != null) {
        this.$refs['vc-tooltip'].style.top = el.target.offsetTop + h - 10 + 'px'
        // } else {
        //   //当el所在div为第二个即最后一个，弹窗的top还需加上上一个div的高度
        //   this.$refs['vc-tooltip'].style.top =
        //     el.target.offsetTop + h + this.$refs['tableCont'].offsetHeight - 10 + 'px'
        // }
      }
    },
    handleMouseout(el) {
      if (el.target.className.includes('table-content')) {
        this.$refs['vc-tooltip'].style.display = 'none'
      }
    },

css

.table_box {
      margin: 5px;
      text-align: center;
      position: relative;
      .heared {
        display: flex;
        height: 21px;
        line-height: 21px;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(6, 90, 254, 0.8);
        & > div {
          margin-left: 5px;
          font-family: Noto Sans SC;
          font-size: 16px;
          font-weight: 700;
          color: #fccd1d;
        }
      }
      .scrollBox {
        .tooltip-box {
          z-index: 5;
          background: #303133;
          color: #fff;
          padding: 10px;
          line-height: 1.2;
          min-width: 10px;
          word-wrap: break-word;
          border-radius: 4px;
          font-size: 12px;
        }
      }
      .warp {
        height: 146px;
        overflow: hidden;
        // margin: 10px 0;
      }
      .tableCont {
        .hangBox {
          height: 27px;
          pointer-events: all;
          padding-top: 1px;
        }
        .hang {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 9px;
          height: 18px;
          line-height: 18px;
          font-style: normal;
          font-size: 16px;
          color: #ffffff;
          background-color: rgba(6, 90, 254, 0.5);
          font-family: Noto Sans SC;
          pointer-events: none;
          & > div {
            margin-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .table-content {
              pointer-events: all;
            }
          }
          .caseLevel {
            width: 60px;
          }
          .receiveCaseTime {
            width: 100px;
          }
          .caseType {
            width: 100px;
          }
          .caseSummary {
            width: 130px;
          }
        }
      }
    }

1.每一行挂载点击事件

开始的思路是在表格行上添加@click事件就行了,这种方式不可行,发现有的行点击事件挂载不上,后来看了看,明白了大概原因,
由于插件为了实现无缝滚动的效果会把表格html部分复制一份,用于滚动的衔接,但是复制的部分不会挂载点击事件.

解决方法

思路:在每一行中添加属性值, :data-obj=“JSON.stringify(item)”,再通过外层的点击事件clickHang,获取目标元素的属性值.

这里还会引发一个问题的是:
如果每一行中的元素结构比较复杂,:data-obj="JSON.stringify(item)"挂载的位置需要考虑一下,如果挂错地方了,外层点击事件获取不到属性值.
这里我使用css属性把hangBox中hang属性pointer-events: none;然后把hangBox元素设置pointer-events: all;目的就是只留下hangbox的触发事件,内部元素就不会影响了.

2.表格中每一行过长,悬停提示

开始思路是直接用elementui中组件el-tooltip实现,但是又遇到问题了,还是上边的问题,插件把表格html部分复制的部分不会有提示.

解决方法

思路:在外边写个弹框,在组件上挂上,mouseover,mouseout事件,通过鼠标事件控制弹框的显隐,代码在上边大家可以去看看.
这里也遇到了一个问题
由于上边为了解决行点击事件,准确获取每行数据问题,咱们把.hang元素的属性pointer-events: none;导致hang中的元素触发不了悬停,所以得把里边的table-content元素属性设置成pointer-events: all;在这个元素上挂上属性:data-obj=“JSON.stringify(item)”,这样完美解决了.

希望对你有帮助,虽然这个组件使用中出现了好多问题,但是对于只实现滚动的需求,这个组件还是很好用的