使用vuejsx编写新手引导层组件e-guide-layer
使用场景用户第一次进入页面，引导用户操作，讲解引导区，让用户了解产品更快地发挥作用。引导层的实现用空心层覆盖目标dom节点，通过getBoundingClientRect获取dom的位置和大小信息，从而设置空心层的大小。演示源码guide-layer为什么使用jsx来配置render函数。大部分react组件的配置项，都是有自定义render的，但是用vue做不到，而是通过slot来自定义内容，这不是我们想要的，所以我们需要用jsx让一切都可配置。render:()=>{return(自定义引导层区域
)}完整配置示例{confirmBtnText:'Nextstep2',targetDom:'.step2',clickHandle:()=>{this.guideActiveIndex=2console.log(this)},render:()=>{return(
自定义引导区 )}}直观的render(){letcurrentIndex=this.currentletcurrentActiveGuideItemData=this.guideList[currentIndex]//console.log('currentIndex',currentIndex,currentActiveGuideItemData)返回(
{currentActiveGuideItemData&&am;({currentActiveGuideItemData.render&¤tActiveGuideItemData.render()})}
)}从代码中很容易理解如何显示当前引导层使用npminstalle-guide-layer--saveimport'e-guide-layer/dist/e-guide-layer.css'importeGuideLayerfrom'e-guide-layer'Vue.use(eGuideLayer)基本代码示例
exportdefault{data(){return{guideActiveIndex:0,guideList:[{confirmBtnText:'Next',targetDom:'.step1',clickHandle:()=>{this.guideActiveIndex=1}},{confirmBtnText:'Next',targetDom:'.step2',clickHandle:()=>{this.guideActiveIndex=2},render:()=>{return(
自定义引导区域 )}},{confirmBtnText:'知道了',targetDom:'.step3',方向:'向下',clickHandle:()=>{this.guideActiveIndex=3}}],}},方法:{},};API配置说明e-guide-layerProps参数说明Type默认值guide-list引导层配置集合Array[]current-index当前激活的引导层Number0z-index引导层最小z-index值Number999GuideItem配置项guide-的参数说明listtypedefaultvaluetargetDomnodepointedbyguidelayer(class,id,dom)StringnullconfirmBtnTextguide层确认按钮StringNextpadding覆盖指向节点的paddng，创建一个间隙Number6guideImgSrc指向节点和确认按钮之间的图像Aboveorbelow(updown)StringupclickHandle点击引导层OK按钮事件函数nullrender使用jsx自定义内容函数null数据研究镂空覆盖层效果vuejsx官方文档guide-layer
