关于vue.js:使用vue-jsx写新手引导层组件eguidelayer

应用场景

用户第一次进入页面，疏导用户进行操作，并对疏导区域进行阐明，从而让用户更疾速的理解产品性能。

疏导层的实现形式

对指标dom节点进行镂空层笼罩，通过getBoundingClientRect获取dom的地位大小信息，从而设置镂空层的大小。

演示

源码

guide-layer

为什么应用jsx

配置render函数

对于大多数react组件配置项都带有自定义render项，然而应用vue并不能做到，而是通过slot来自定义内容，但这并不是咱们想要的，所以咱们须要借助jsx让所有可配置。

  render: () => {            return (              <div                style="background-color:#fff;"                onClick={this.step1ClickHandle}              >                自定义疏导层区域              </div>            )          }

残缺的配置示例

       {          confirmBtnText: '下一步',          targetDom: '.step2',          clickHandle: () => {            this.guideActiveIndex = 2            console.log(this)          },          render: () => {            return (              <div                style="background-color:#fff;"                onClick={this.step1ClickHandle}              >                自定义疏导层区域              </div>            )          }        }

直观

  render() {    let currentIndex = this.current    let currentActiveGuideItemData = this.guideList[currentIndex]    // console.log('currentIndex', currentIndex, currentActiveGuideItemData)    return (      <div>        {currentActiveGuideItemData && (          <GuideItem            key={currentIndex}            targetDom={currentActiveGuideItemData.targetDom}            confirmBtnText={currentActiveGuideItemData.confirmBtnText}            direction={currentActiveGuideItemData.direction}            vOn:confirm={currentActiveGuideItemData.clickHandle}          >            {currentActiveGuideItemData.render &&              currentActiveGuideItemData.render()}          </GuideItem>        )}      </div>    )  }

从代码中很容易了解如何展现以后的疏导层。

应用

npm install e-guide-layer --saveimport 'e-guide-layer/dist/e-guide-layer.css'import eGuideLayer from 'e-guide-layer'Vue.use(eGuideLayer)

根底代码示例

<e-guide-layer      :current-index.sync="guideActiveIndex"      :guide-list="guideList"/>export default {    data() {    return {      guideActiveIndex: 0,      guideList: [        {          confirmBtnText: '下一步',          targetDom: '.step1',          clickHandle: () => {            this.guideActiveIndex = 1          }        },        {          confirmBtnText: '下一步',          targetDom: '.step2',          clickHandle: () => {            this.guideActiveIndex = 2          },          render: () => {            return (              <div                style="background-color:#fff;"                onClick={this.step1ClickHandle}              >                自定义疏导层区域              </div>            )          }        },        {          confirmBtnText: '晓得了',          targetDom: '.step3',          direction: 'down',          clickHandle: () => {            this.guideActiveIndex = 3          }        }      ],    }  },  methods: {  },};

API 配置阐明

e-guide-layer Props

guide-list的GuideItem 配置项

材料

镂空遮蔽层成果的钻研
vue jsx官网文档
guide-layer