此文总结了我多年组件封装经验，以及拜读 antd、element-plus、vant、fusion等多个知名组件库所提炼的完美组件封装的经验；是一个开发者在封装项目组件，公共组件等场景时非常有必要遵循

功能截图： 代码实现：Vue3 + Ts 适用场景 手机/邮箱验证码输入（登录、注册、找回密码等场景） 需要用户输入定长安全码、授权码等场景

假进度条需求调研，简单研究一下 NProgress 和 fake-progress，再自己手动封装一个自定义 hook

文章包含我对封装的一些理解，并提供几种技巧和封装实例，包括弹窗（抽屉）的封装套路、Tooltip根据父元素宽度自动显示、按钮组的封装。

vue-seamless-scroll介绍 vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目

Vue 可拖拽组件 vue-grid-layout 使用入门 介绍 官网：https://jbaysolutions.github.io/vue-grid-layout/** GitHub：https

使用 vue 的 render 渲染函数 和 h 函数，将vue的组件渲染为html，最终截取出来作为 G6 的节点使用。

文章展示了接入AntV G6到Vue中并实现需求的过程，其中的难点主要集中在自定义节点和边的部分，除了熟悉文档相关内容，还需要对SVG path掌握一定的知识。希望本篇文章能帮助将要使用次技术的朋友。

ContextMenu 即右键菜单，当前的需求是：右键点击某些组件时，根据所点击组件的信息，展示不同的菜单。 思考一下... . . . . 当祖先节点定位非 static 时，absolute 定位的 ContextMenu 的参考点就是以祖先节点为参考点了。 这里需要注意获…