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

40次阅读

共计 2224 个字符,预计需要花费 6 分钟才能阅读完成。

应用场景

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

疏导层的实现形式

对指标 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 疏导层配置汇合 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

正文完
 0