首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

VUE表格的横向拖拽滚动(drag)

2023年04月13日 发布 阅读(1241) 作者：Jerman
  1. // public引入
  2. // https://www.npmjs.com/package/scrollbooster
  3. // https://github.com/ilyashubin/scrollbooster
  4. <script src="/scrollbooster/dist/scrollbooster.min.js"></script>
  1. // utils
  2. /**
  3.  * 拖动横向滚动
  4.  */
  5. export function dragTableToScroll(viewport, content) {
  6.   let viewportDom = viewport
  7.     ? viewport
  8.     : document.querySelector('.ant-table-content');
  9.   let contentDom = content
  10.     ? content
  11.     : document.querySelector('.ant-table-body');
  12.   // eslint-disable-next-line no-undef
  13.   const horizontalScroll = new ScrollBooster({
  14.     viewport: viewportDom,
  15.     content: contentDom,
  16.     scrollMode: 'native', // use CSS 'transform' property
  17.     direction: 'horizontal', // allow only horizontal scrolling
  18.     bounce: false,
  19.     textSelection: true,
  20.     emulateScroll: true, // scroll on wheel events
  21.   });
  22.   return horizontalScroll;
  23. }
  1. // .vue文件
  2. // 表格横向滚动注册
  3. this.$nextTick(() => {
  4.     this.horizontalScrollDestory(); 
  5.     // 正常下一行这样调用，默认支持ant-design UI
  6.     this.horizontalScroll = dragTableToScroll();
  8.     // 如果上面一行不生效，ant-design UI用下面的几行
  9.     //this.horizontalScrollDevice = dragTableToScroll(
  10.     //    document.querySelector('.device-event .ant-table-body'),
  11.     //    document.querySelector('.device-event .ant-table-body table')
  12.     //);
  13. });
  15. // 横向滚动事件注销
  16. horizontalScrollDestory() {
  17.     if (this.horizontalScroll) {
  18.     this.horizontalScroll.destroy();
  19.     }
  20. },
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号