使用vue jsx写新手引导层组件e-guide-layer

时间:2020-8-2 作者:admin

使用场景

用户第一次进入页面,引导用户进行操作,并对引导区域进行说明,从而让用户更快速的了解产品功能。

引导层的实现方式

对目标dom节点进行镂空层覆盖,通过getBoundingClientRect获取dom的位置大小信息,从而设置镂空层的大小。

演示

使用vue jsx写新手引导层组件e-guide-layer

使用vue jsx写新手引导层组件e-guide-layer

使用vue jsx写新手引导层组件e-guide-layer

源码

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 引导层配置集合 Array []
current-index 当前激活的引导层 Number 0
z-index 引导层最小的z-index值 Number 999

guide-list的GuideItem 配置项

参数 说明 类型 默认值
targetDom 引导层指向的节点(class,id,dom) String null
confirmBtnText 引导层确定按钮 String 下一步
padding 覆盖指向节点的paddng,使产生空隙 Number 6
guideImgSrc 指向节点与确认按钮之间的图片 String 默认箭头图片
guideImgHeight 指引图片的高度 String 30px
direction 引导指示实在目标的上面还是下面 (up down) String up
clickHandle 点击引导层确定按钮的事件 function null
render 使用jsx自定义的内容 function null

资料

镂空遮盖层效果的研究
vue jsx官方文档
guide-layer

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。