Vue3 组合函数 element-plus table数据滚动播放

Vue 滚动播放组合函数

import { onMounted, onUnmounted } from "vue";

export function createScroll(tableRef) {
  let timer = null;
  function startScroll() {
    const table = tableRef.value.layout.table.refs;
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
    timer = setInterval(() => {
      tableWrapper.scrollTop += 1;
      if (
        tableWrapper.clientHeight + tableWrapper.scrollTop >=
        tableWrapper.scrollHeight
      ) {
        tableWrapper.scrollTop = 0;
      }
    }, 50);
  }
  function clearScroll() {
    clearInterval(timer);
  }
  onMounted(() => {
    startScroll();
  });
  onUnmounted(() => {
    clearScroll();
  });
  return {
    startScroll,
    clearScroll,
  };
}

  

posted @ 2024-03-13 09:34  小七要走  阅读(120)  评论(0编辑  收藏  举报