新手帮助.gif
- 安装driver.js
cnpm install driver.js -s
- 引入
import Driver from "driver.js" // 引入插件
import "driver.js/dist/driver.min.css" // 引入插件
import steps from "./dd" // 引入步骤
- 创建一个js文件，用于存放 step的提示, 内容如下
// 通过绑定元素 类名，id名的形式来 执行步骤， 注意第一个对象要写两次。
const steps = [
{
element: "#guide-menu",
popover: {
title: "菜单导航",
description: "点击菜单可切换右侧菜单内容",
position: "right"
}
},
{
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
- 具体实现
<template>
<div>
<div id="guide-menu">744</div>
<div class = "collapse-box">744</div>
<div id="guide-breadcrumb">744</div>
<div class="user-content">744</div>
<div id="tagsView">855</div>
<el-button @click = 'clicks' >帮助索引</el-button>
<div @click = 'clicks' > 点击我 </div>
</div>
</template>
<script>
import Driver from "driver.js" // 引入插件
import "driver.js/dist/driver.min.css" // 引入插件
import steps from "./dd" // 引入步骤
export default {
name: "Guide",
data () {
return {
driver: null
}
},
mounted () {
// this.guide(); // 正常显示
},
methods: {
clicks() {
// 点击事件不能正常显示
this.guide();
},
guide() {
console.log('kk');
this.driver = new Driver({
className: "scoped-class", // className to wrap driver.js popover
// className: "collapse-box", // 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: true, // 一定要设置为ture 不然点击事件不能触发。
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({}); 创建对象
this.driver.defineSteps(steps); // 定义步骤
this.driver.start();
}
}
}
</script>
<style>
#guide-menu {
width: 100px;
height: 100px;
background-color: #333;
}
</style>
