driver 官方地址
配置项及官方demo ,可直接跳过看安装,若遇到问题和特殊需求再看
安装 driver
npm install driver.js --save
在子组件页面引入
(如果在父组件 配置的话,子组件引导会出问题,如果多处使用,也可以在main.js配 置)
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
配置(子组件)
1.在methods 封装函数
父组件 子组件 其它组件 要引导的元素上设置id即可
test() {
// debugger;
const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
// 父组件元素id
{
element: "#element-01",
popover: {
className: "first-step-popover-class",
title: "Title on Popover",
description: "Body of the popover",
position: "left",
},
},
{
element: "#element-02",
popover: {
title: "Title on Popover",
description: "Body of the popover",
position: "left",
},
},
// 子组件元素id
{
element: "#element-1",
popover: {
title: "Title on Popover",
description: "Body of the popover",
position: "right",
},
},
//其它组件id
{
element: "#tips",
popover: {
title: "Title on Popover",
description: "Body of the popover",
position: "left",
},
},
]);
// Start the introduction
driver.start();
},
2.在数据返回后,处理
(如果引导的元素,是后台数据驱动,如if包围,否则 在mounted 中调用函数即可)
结束 至此大功告成~
常见问题
如是元素显示不出,可能是定位问题,可以设置成下面的样式试试
position: absolute;