vue2使用记录

架构搭建

对于旧项目，大体都是使用的 https://github.com/vuejs-templates/webpack 这里的官方模板。

可以使用 我需要现成的 Vue 2 项目模板（不要手写 Webpack 配置），最好是官方或知名社区维护的，列出不同方案的优缺点 提示词来让AI获取更多回答。

拖拽实现

在参考 ant-design-pro 实现高级表格编辑功能时，发现有一个列排序的功能涉及到拖拽，见：https://preview.pro.ant.design/list/table-list

由于系统采用的是 vue2 + element-ui 的架构，无法直接搬运其代码。拖拽说起来简单但是涉及情况非常多，重新造轮子不如研究现有的社区解决方案。因此下载了其代码研究了下其实现方式，经过摸索找到了其 pro-component 的官方文档（https://pro-components.antdigital.dev/components/drag-sort-table）是通过 dnd 实现的拖拽，也顺利找到了 dnd 官方文档的该效果实现。但是遗憾的是发现 vue 只能在 vue3 的版本才能使用 dnd 库实现（https://www.vue3-dnd.com/example/sortable/indicator.html）。vue2 主要还是使用的 vuedraggable

（依赖了sortablejs）。这里一下子那么多的拖拽库，往往很难选择，有机会记录下其差异

问题记录

1. 依赖 el-popver 的所有组件都不能点击 document 自动收起（如 el-select, el-date-picker）

   该问题找了好久断点只能看到 handleDocumentClick 方法没有正确执行，https://github.com/ElemeFE/element/blob/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/popover/src/main.vue#L193。

   然后在 App.vue 里面加一个 el-date-picker 发现居然可以正常收起，因此发现应该是后面现有代码导致的问题，最后查看到下面代码：

   <el-dropdown @command="handleCommand" trigger="click">
       <span style="color: #ffffff"
             ><i class="el-icon-user"></i>{{ username
           }}<i class="el-icon-arrow-down el-icon--right"></i
           ></span>
       <!-- <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
       <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
       </el-dropdown-menu>  -->
   </el-dropdown>

   原来是之前组里的同事为了去除用户登录功能时删除的代码导致 el-popver 没有 reference 而无法正确关闭，将整段代码注释后功能恢复正常了。

2. 解决element-ui table固定列滚动条无法拖动问题

   .el-table__fixed, .el-table__fixed-right {
     pointer-events: none;
   }
   
   .el-table__fixed .cell, .el-table__fixed-right .cell{
     pointer-events: auto;
   }

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/4d310fdf.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！