文章目录
- 描述
- 一、效果
- 二、文件目录
- 三、El-Table插件文件
- 四、使用
- 1.局部注册指令
- 2.全局注册指令 `main.js`下添加此代码
- 五、例子
描述
- 此指令用于处理表格元素的自动滚动逻辑,支持设置滚动速度、时间间隔、开始/结束时间间隔。
- 当鼠标进入元素时,暂停滚动;离开时,根据配置恢复滚动。
- 定时或者其他方案实时刷新数据即可
一、效果
二、文件目录
三、El-Table插件文件
在 el-table-autoScrollbar 目录下创建一下文件
index.js
文件.
/**
* PS: Waseem
* URL: blog.waseem.cn
* Data: 2024-07-11
* **/
import scroll from './scroll'
const install = function (Vue) {
Vue.directive('el-table-auto-scroll', scroll)
}
if (window.Vue) {
window['el-table-auto-scroll'] = scroll
Vue.use(install);
}
scroll.install = install
export default scroll
scroll.js
文件.
/**
* PS: Waseem
* URL: blog.waseem.cn
* Data: 2024-07-11
* **/
// 检查值是否为有效数字的函数
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__);
}
};
四、使用
1.局部注册指令
<template>
<div>
<el-table v-elTableAutoScroll="{ time: 1000, speed: 200, loop: true}">
<!-- 表格内容 -->
</el-table>
</div>
</template>
<script>
import elTableAutoScrollbar from '../utils/directive/el-table-autoScrollbar';
export default {
directives: {
elTableAutoScroll: elTableAutoScrollbar
}
};
</script>
2.全局注册指令 main.js
下添加此代码
import elTableAutoScrollbar from "../src/utils/directive/el-table-autoScrollbar";
// 全局注册指令
Vue.directive('elTableAutoScroll', elTableAutoScrollbar);
五、例子
/**
* Vue 自动滚动指令
* @author Waseem
* @date 2024-07-11
*
* 参数:
* - time: 自动滚动开始前的延迟时间(毫秒)。
* - speed: 滚动的速度(毫秒,可能表示每次滚动的时间间隔)。
* - loop: 是否在到达底部后重新滚动到顶部。
* - timeStart: 当滚动到顶部时,再次开始滚动前的等待时间(毫秒)。
* - timeEnd: 当滚动到底部时,再次开始滚动前的等待时间(毫秒)。
*/
data() {
return {
autoScrollbar: {
time: 1000 * 10,
speed: 100,
loop: true,
timeStart: 1000 * 3,
timeEnd: 1000 * 5,
},
}
},
<el-table :data="tableData" style="width: 100%;" height="100%" v-el-table-auto-scroll="autoScrollbar">
<el-table-column prop="name" label="名称" min-width="150"></el-table-column>
</el-table>
BLOG: Waseem BLOG–专注于分享有趣的技术 解决难题