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

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

2023年04月13日 发布 阅读(1003) 作者: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();
  7. // 如果上面一行不生效,ant-design UI用下面的几行
  8. //this.horizontalScrollDevice = dragTableToScroll(
  9. // document.querySelector('.device-event .ant-table-body'),
  10. // document.querySelector('.device-event .ant-table-body table')
  11. //);
  12. });
  13. // 横向滚动事件注销
  14. horizontalScrollDestory() {
  15. if (this.horizontalScroll) {
  16. this.horizontalScroll.destroy();
  17. }
  18. },
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处