首页 > 其他分享 >Vue3 组合函数 element-plus table数据滚动播放

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

时间:2024-03-13 09:46:56浏览次数:16  
标签:function tableWrapper clearScroll startScroll timer element plus Vue3 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,
  };
}

  

标签:function,tableWrapper,clearScroll,startScroll,timer,element,plus,Vue3,table
From: https://www.cnblogs.com/xiaoqiyaozou/p/18069906

相关文章

  • vue3的路由拦截?
    在Vue.js中,可以使用路由拦截器(RouteInterceptors)来实现对路由的拦截和控制。通过路由拦截器,我们可以在路由导航过程中进行一些操作,如验证用户身份、权限控制、重定向等。VueRouter提供了全局前置守卫(GlobalBeforeGuards)、路由独享守卫(Per-RouteGuards)和组件内的守卫(In......
  • Vue3——集成mock 模拟数据生成器
    安装依赖[email protected]在vite.config.js文件中引入并配置vite-plugin-mock插件import{UserConfigExport,ConfigEnv}from'vite'import{viteMockServe}from'vite-plugin-mock'importvuefrom'@vitejs/plugin-......
  • 创建Vue3项目,更多参考vue官网
     一、环境:1、Node版本(node-v命令查询,参考则是需要18.0及以上)C:\Users\86176>node-vv16.14.0后续又重新下载nvm进行新的版本安装,这里后面安装的19.0的也有错误,安装18.19.12、vue-cil版本(vue-V命令可查询电脑版本,参需3.0以上)C:\Users\86176>vue-V@vue/cli5.0.83、其他......
  • vue3+elementplus(ElementUI)入门案例
    1、配置脚手架,已配置则无需再配npminstall-gvue-cli2、创建空文件夹,用vscode打开,并在vscode终端执行如下命令vuecreateXXXcdXXX3、安装elementplus插件,注意:vue3需要搭配elementplus使用,elementplus是elementui的升级版,需搭配vue3使用(初学者建议直接学vue3+elemen......
  • 基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离、跨平台的快速开发框架
    前言今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.NetCore前后端分离、开源免费(MITLicense)、强大、跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工作,提高开发效率),支持移动端(iOS/Android/H5/微信小程序):Vue.NetCore。提高开发生产效率、避免996可以考虑试试这......
  • VUE3将时间戳转换为时间格式
     formatDate(time){constdate=newDate(time*1000);constyear=date.getFullYear();constmonth=String(date.getMonth()+1).padStart(2,'0');//月份从0开始,所以加1,并用0填充constday=String(date.getDate()).padStart(2,&#......
  • Vue3中使用TinyMce编辑器
    在线演示地址:TinyMce编辑器邮件发送一,安装TinyMce富文本npminstall@tinymce/tinymce-vue-Snpminstalltinymce-STinyMce本身是英文编辑器,所以还需要下载中文本地化文件:https://www.tiny.cloud/get-tiny/language-packages/下载完成后放入node_modules下的tinymce文......
  • vue3 keepalive 失效
    好久没更新博客了,重复拧螺丝keepalive之前用过,但是好久了,所以这次遇到问题觉得有点新颖我遇到的问题是在路由里面设置子路由,子路由的router-view设置keepalive不生效的问题 之前用了keep-alive没有用v-slot因为router-view就是一个单独的组件,他的本质并不是使用url对应的组......
  • Vue3自定义指令实现权限控制
    使用Pinia(Vue.js的轻量级状态管理库,是Vuex的替代品)来管理用户权限,并结合自定义指令控制元素的显隐。步骤操作如下:1、安装Pinia:npminstallpinia或yarnaddpinia解释:安装Pinia库,这是一个轻量级的状态管理库,适用于Vue3。2、创建PiniaStore://stores/user.jsimport{......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......