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

微信扫一扫,分享到朋友圈

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

使用场景

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

引导层的实现方式

对目标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

资料

三星Galaxy A32或将是一款平价5G手机

上一篇

协程初探

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友