-
前言
最近写到一个用户新手引导的功能,类似于阿里云,华为云等控制台第一次进入时候的用户引导模式。使用Driver.js,提供了Vue的api,直接调用即可。
使用方法
1.引入
yarn add driver.js
2. 在项目中使用
- 在需要组件中引入
<script>
import Driver from "driver.js" // import driver.js
import "driver.js/dist/driver.min.css" // import driver.js css
import steps from "../plugins/guide"
export default {
data () {
return {
driver: null
}
},
mounted () {
this.driver = new Driver({
className: "scoped-class", // className to wrap driver.js popover
animate: true, // Animate while changing highlighted element
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
allowClose: true, // Whether clicking on overlay should close or not
overlayClickNext: false, // Should it move to next step on overlay click
doneBtnText: "完成", // Text on the final button
closeBtnText: "关闭", // Text on the close button for this step
nextBtnText: "下一步", // Next button text for this step
prevBtnText: "上一步" // Previous button text for this step
// Called when moving to next step on any step
})
// this.driver = new Driver()
},
methods: {
guide () {
this.driver.defineSteps(steps)
this.driver.start()
}
}
}
</script>
- 编写引导流程
//guide.js
export const steps = [ //可以导出多个引导步骤,在不同组件中使用
{
element: "xxx", //通过id获取元素
popover: {
title: "",
description: "",
position: "right"
}
},
{
element: "xxx", //通过id获取元素
popover: {
title: "",
description: "",
position: "right"
}
}
]
- 调整细节
如果项目中使用了
position: fixed
那么需要修改全局中,由driver.js添加的css:
.dirver-fix-stacking .header {
position: relative
}
防止出现引导的白底覆盖掉原先内容的问题。当然,也可以通过调整element的z-index来实现。
Comments | 0 条评论