- 博客(7)
- 收藏
- 关注
RSS订阅原创 数组拖拽交换顺序的几种方法推荐
如果是 element、 ant 组件里的表格 拖拽排序 建议用Sortable, 其他简单的列表排序用vuedraggablevuedraggable 使用是一个标签 包含你所要拖拽的内容list, 而element ant 这种ui框架,对 表格进行了封装,vuedraggable无法准确的去包含到表格行(及tbody里的tr td)数据, 而Sortable是直接绑定一个dom,可以根据dom去绑定如果这两种方法都无法实现想要的效果那就再使用html原生方法吧。
2023-11-22 17:35:41
1060
1
原创 Vue3技术总结
使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂/*收集用户鼠标点击的页面坐标*/// 初始化坐标数据// 用于收集点击事件坐标的函数// 挂载后绑定点击监听})// 卸载前解绑点击监听})<template><div></div><script>import {ref/*在组件中引入并使用自定义hook。
2023-11-22 17:10:35
1044
1
原创 vue3性能优化相关
vue3中是先遍历（v-for），再判断（v-if），这里有个问题就是：如果你有一万条数据，其中只有 100 条是isActive状态的，你只希望显示这 100 条，但是实际在渲染时，每一次渲染，这一万条数据都会被遍历一遍。比如你在这个组件内的其他地方改变了某个响应式数据时，会触发重新渲染，调用渲染函数，调用渲染函数时，就会执行到上面的代码，从而将这一万条数据遍历一遍，即使你的users没有发生任何改变。scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。
2023-11-22 17:08:01
105
1
原创 Vue自定义拖拽指令
设置了v-drag的元素即可拖动，v-drag=dragBody表示拖动menu-outlined图标时，ref为dragBody的div会被拖动。
2023-11-22 17:01:51
127
1
原创 Vue性能优化：实现页面组件的懒加载
当页面存在多个test组件时，不使用懒加载，将会同时渲染，同时调用接口，会造成页面的卡顿，非常影响体验。而使用了懒加载后，只有当进入页面可视区域的test组件才会初始化渲染，提高页面加载速度。LazyLoader中，使用setTimeout是为了在组件初始化之前显示一个加载状态框，防止显示空白很突兀。懒加载组件需要设置宽度和高度和监听的组件高度宽度一致才能让加载框位于中心位置。懒加载组件LazyLoader。
2023-11-22 15:48:24
246
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人