## 1. 前言: 新手引导组件,顾名思义,就是强制性的要求第一次使用的用户跟随引导使用应用,可以让一些第一次使用系统的新手快速上手,正好我最近也遇到了这个需求,于是就想着开发一个通用组件拿出来使用(写完之后才发现element就有,后悔了哈哈哈😭😭) 示例图: 1. 第一步 ![第一步](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e121b091320e434da34c60dd46a8c9c9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgcm9va2llZmlzaHM=:q75.awebp?rk3s=f64ab15b&x-expires=1764909287&x-signature=91rZHqxnRLm7mIITRx0%2Bmy%2Fw3j4%3D) 2. 第二步 ![第二步](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a67ed482844c42faa7dd08b65ae17e76~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgcm9va2llZmlzaHM=:q75.awebp?rk3s=f64ab15b&x-expires=1764909287&x-signature=%2BtASrgivSF41DnNlNsm96rlIVKQ%3D) 3. 第三步 ![第三步](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/eba827613d244e8cadb9762c09032449~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgcm9va2llZmlzaHM=:q75.awebp?rk3s=f64ab15b&x-expires=1764909287&x-signature=xuar82p01IqKsrFBRZ%2F8rqTXty8%3D) ## 2. 使用的技术栈以及组件: `Vue3+Vite+Element+uuid`,使用了`el-popover`组件以及`el-button组件` ## 3. 遇到的问题: 开发这个组件不是一个简单的事情,遇到了不少的问题,尤其是样式上的问题,下面我一一说明以及对应的解决方式 1. 需要将用户可以点击的部分凸出出来: 在原先我是打算给组件传入一个`class类名的`,然后通过指定的`class类名`获取到`dom`,之后再通过`dom.getBoundingclientRect()`方法获取指定dom的尺寸以及位置信息,然后再组件中创建一个空白区域,但是我真正尝试的时候才发现一个致命问题,`getBoundingclientRect`方法获取的位置信息都是对的,但是尺寸却是固定的0,后面才发现,如果新手引导的内容是一个图片的话,就必须要等到图片加载完成后再在页面上进行引导,我尝试了onload之后再进行绘制,虽然实现了想要的效果,但是我觉得这样操作太麻烦了,就抛弃了这种方法 2. 改为插槽: 上面的方法行不通,操作也麻烦,然后我就创建了两个插槽,一个是content插槽,此插槽没有任何作用,只是将内容显示出来,一个是target插槽,这里的插槽将会作为新手引导的内容,这里解释下为什么需要两个插槽,因为新手引导组件可能应用于循环中,针对于循环的其他内容,可以使用content插槽填充,需要新手引导的内容再使用target插槽即可 ## 4. 源码讲解(请查看详细注释): ```html ``` ## 5. 使用新手引导组件示例: ```html ``` ### 6. 总结: 以上就是从0到1开发一个能简单使用的新手引导组件的全过程以及源码了,可能使用起来不是很方便,哈哈,这里不得不佩服那些开发通用组件的大佬,确实很不容易👍🏻👍🏻