关于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 --save
import '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