driver.js
特色功能:
- 突出显示页面上的任何任何项目
- 锁定用户交互
- 创建功能介绍
- 为用户添加聚焦器
- 高度可定制 – 可在任何地方使用,可覆盖
- 界面友好 – 可通过按键控制
- 轻量级 – gzip 压缩后只有约4kb
- 在所有主流浏览器中保持一致的行为
- 免费用于个人和商业用途
安装
无论你喜欢哪种方式,你都可以使用 yarn 或 npm 进行安装。
yarn add driver.js
npm install driver.js
或者直接在文件中引入它。
<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>
在vue项目中安装 driver.js
npm install driver.js
在需要用到的页面引入,例如:help.vue
<script>
import Driver from "driver.js" // import driver.js
import "driver.js/dist/driver.min.css" // import driver.js css
import steps from "../vendor/guide"
export default {
name: "Guide",
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
//guide.js
const steps = [
{
element: "#guide-menu",
popover: {
title: "菜单导航",
description: "点击菜单可切换右侧菜单内容",
position: "right"
}
},
{
element: ".collapse-box",
popover: {
title: "汉堡包",
description: "点击收缩和展开菜单导航",
position: "bottom"
},
padding: 5
},
{
element: "#guide-breadcrumb",
popover: {
title: "面包屑导航",
description: "用于显示 当前导航菜单的位置",
position: "bottom"
}
},
{
element: ".user-content",
popover: {
title: "个人中心",
description: "点击可操作",
position: "left"
}
},
{
element: "#tagsView",
popover: {
title: "最近打开任务",
description: "最近打开任务菜单,点击可快速切换",
position: "bottom"
}
}
]
export default steps