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

安全模
• 阅读 4958

使用场景

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

引导层的实现方式

对目标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当前激活的引导层Number0
z-index引导层最小的z-index值Number999

guide-list的GuideItem 配置项

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

资料

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

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
Linux系统开机启动流程(简述)
1)开机自检,加载BIOS信息    CPU的相关信息、设备启动顺序信息、硬盘信息、内存信息、时钟信息等2)MBR引导    硬盘的0柱面0磁道1扇区被称为MBR(MasterBootReord)主引导记录,大小为512字节,里面存放预启动信息、分区表信息及分区标志等;分为两部分:第