Vue - 自定义指令 - el-table开启自动滚动

el-table开启自动滚动

1. 编写指令文件

@scr/directive/table/HiElTableAutoScroll/scroll.js

// 检查值是否为有效数字的函数
function isNumber(value) {
  return typeof value === 'number' && !isNaN(value);
}

export default {
  // 绑定指令时的钩子函数
  bind(el, binding) {
    // 从绑定值中提取参数或使用默认值
    const time = isNumber(binding.value.time) ? binding.value.time : 60000; // 定时开始滚动的时间
    const speed = isNumber(binding.value.speed) ? binding.value.speed : 100; // 滚动速度
    const loop = (binding.value.loop !== undefined && binding.value.loop !== null) ? binding.value.loop : true; // 是否循环滚动
    const timeStart = isNumber(binding.value.timeStart) ? binding.value.timeStart : 0; // 开始等待时间
    const timeEnd = isNumber(binding.value.timeEnd) ? binding.value.timeEnd : 0; // 结束等待时间
    const step = 1; // 每次滚动的步长

    // 获取表格体容器
    const wrapper = el.querySelector('.el-table__body-wrapper');
    wrapper.__isExecute__ = false;

    // 自动滚动函数
    wrapper.__vueAutoScroll__ = () => {
      clearTimeout(wrapper.__animationTime__); // 清除之前的动画时间
      const scrollHeight = wrapper.scrollHeight;
      const clientHeight = wrapper.clientHeight;
      let scrollTop = wrapper.scrollTop;

      // 如果内容高度小于或等于容器高度，则停止滚动
      if (clientHeight >= scrollHeight) {
        return;
      }

      // 如果循环滚动并且在顶部时，设置开始等待时间
      if (loop && wrapper.__isExecute__ && scrollTop === 0) {
        if (timeStart === 0) {
          wrapper.__isExecute__ = false;
          wrapper.__vueAutoScroll__()
        } else {
          wrapper.__startTime__ = setTimeout(() => {
            wrapper.__vueAutoScroll__()
            wrapper.__isExecute__ = false;
          }, timeStart)
        }
        return;
      }

      // 如果滚动到底部，设置结束等待时间
      if (clientHeight + scrollTop >= scrollHeight) {
        if (loop) {
          if (timeEnd === 0) {
            wrapper.__isExecute__ = true;
            wrapper.scrollTop = 0;
            wrapper.__vueAutoScroll__()
          } else {
            wrapper.__endTime__ = setTimeout(() => {
              wrapper.__isExecute__ = true;
              wrapper.scrollTop = 0;
              wrapper.__vueAutoScroll__()
            }, timeEnd)
          }
        }
        return;
      }

      // 如果未到达底部，继续滚动
      if (scrollTop < scrollHeight) {
        scrollTop += step;
        wrapper.scrollTop = scrollTop;
        wrapper.__animationTime__ = setTimeout(() => requestAnimationFrame(wrapper.__vueAutoScroll__), speed);
      }
    };

    // 停止滚动函数，清除所有定时器
    wrapper.__stopScroll__ = () => {
      clearTimeout(wrapper.__animationTime__);
      clearTimeout(wrapper.__mouseleaveTime__);
      clearTimeout(wrapper.__startTime__);
      clearTimeout(wrapper.__endTime__);
    };

    // 开始滚动函数
    wrapper.__startScroll__ = () => {
      wrapper.__mouseleaveTime__ = setTimeout(() => {
        wrapper.__vueAutoScroll__();
      }, time);
    };

    // 添加鼠标事件监听器
    wrapper.addEventListener('mouseenter', wrapper.__stopScroll__);
    wrapper.addEventListener('mouseleave', wrapper.__startScroll__);

    // 初始启动滚动
    wrapper.__startScroll__();
  },
  // 解绑指令时的钩子函数
  unbind(el) {
    // 清除所有定时器和事件监听器
    const wrapper = el.querySelector('.el-table__body-wrapper');
    clearTimeout(wrapper.__animationTime__);
    clearTimeout(wrapper.__mouseleaveTime__);
    clearTimeout(wrapper.__startTime__);
    clearTimeout(wrapper.__endTime__);
    wrapper.removeEventListener('mouseenter', wrapper.__stopScroll__);
    wrapper.removeEventListener('mouseleave', wrapper.__startScroll__);
  }
};

@scr/directive/table/HiElTableAutoScroll/index.js

// 检查值是否为有效数字的函数
function isNumber(value) {
  return typeof value === 'number' && !isNaN(value);
/**
 * Vue 自动滚动指令
 *
 * 参数:
 * - time: 滚动间隔，默认值为 1 分钟（1000 * 60 毫秒）
 * - speed: 每次滚动的速度，默认值为 （1000 * 60 毫秒）
 * - loop: 是否循环滚动，当滚动到底部时回到顶部，默认关闭
 * - timeLoop: 是否启用时间循环，即使已经滚动到底部，每隔一定时间重新开始，默认关闭
 */
import Vue from 'vue'
import scroll from './scroll'

const install = function (Vue) {
  Vue.directive('hi-el-table-auto-scroll', scroll)
}

if (window.Vue) {
  window['hi-el-table-auto-scroll'] = scroll
  Vue.use(install);
}

scroll.install = install
export default scroll

2. 全局注册指令

/scr/main.js

import HiElTableAutoScroll from "@scr/directive/table/HiElTableAutoScroll/index.js"
Vue.directive('hi-el-table-auto-scroll', HiElTableAutoScroll)

3. 使用

/scr/index.vue

<el-table :data="tableList" v-hi-el-table-auto-scroll="autoScrollbar">
	...
</el-table>

<script>
	const autoScrollbar = {
		time: 0,
		speed: 30,
		loop: true,
		timeLoop: true
	}
</script>