<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link crossorigin="anonymous" integrity="sha384-cH28etaYXGV0odKyp4NzakDm9jgWghOa00YPrGTYUf1Ka8qTcQw9NO456x/4ZLVY"
href="https://lib.baomitu.com/driver.js/0.9.8/driver.min.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-iw67aNAQa9PD3IxD5gYwEb9FOuItrWzUITZT3EUrQMt+pSzPUdNsJcL2dI2NJ9Mp"
src="https://lib.baomitu.com/driver.js/0.9.8/driver.min.js"></script>
<title>driver</title>
<style>
.box-1 {
width: 100px;
height: 100px;
background-color: #1aa094;
display: inline-block;
}
.box-2 {
width: 200px;
height: 200px;
background-color: #FF6347;
float: right;
}
.box-3 {
margin-top: 400px;
background-color: #00a2d4;
float: right;
}
/*
* 隐藏引导中的关闭按钮，必须到最后一步才能关闭
*/
div#driver-popover-item .driver-popover-footer button {
display: none;
}
</style>
</head>
<body>
<div class="box-1" data-vale="2">
1
</div>
<button class="box-3" onclick="javascript:driver.start();">
重新引导
</button>
<script>
const steps = [
{
element: '.box-1',
popover: {
title: "第一步",
description: '这是one',
//position: 'top', //位置，可选值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
opacity: 0.1,
animate: true,
closeBtnText: '关闭提示',
nextBtnText: 'next->',
prevBtnText: '<-prev',
}
},
{
element: '.box-2',
popover: {
title: "第二步",
description: '这是two',
position: 'left'
}
},
// {
// element: '.box-3',
// popover: {
// title: "第三步",
// description: '这是three',
// //position: 'bottom'
// }
// }
];
const channel = new BroadcastChannel('myChannel');
const driver = new Driver({
allowClose: false, // 是否点击遮罩关闭
overlayClickNext: false, //是否允许点击遮罩时移到到下一步
doneBtnText: "我知道了", // 最终按钮上的文本, 最后一步 按钮文案
closeBtnText: "跳过", // 默认的 关闭 按钮文案
nextBtnText: "下一步", // 默认的 下一步 按钮文案
prevBtnText: "上一步", // 默认的 上一步 按钮文案
overlayClickNext: true,
padding: 10, // 边距
// 覆盖即将清除时调用
onReset: (e) => {
if (driver.hasNextStep()) {
console.log("验证是否有下一步", driver.hasNextStep())
return false;
}
},
// 在任何步骤转到下一步时调用
onNext: (e) => {
const box1 = e.node
const dataValue = box1.getAttribute('data-vale');
if (dataValue == 2) {
let a = {
element: '.box-2',
popover: {
title: "第二步",
description: '这是two',
position: 'left'
}
}
channel.postMessage(a);
}
console.log("dataValue", dataValue)
console.log("onNext", e)
},
// 在任何步骤转到上一步时调用
onPrevious: (e) => {
console.log("onPrevious", e)
//如果没有上一步，阻止执行
if (!driver.hasPreviousStep()) {
console.log("验证是否有上一步", driver.hasPreviousStep())
driver.preventMove();// 阻止当前移动
return;
}
}
});
driver.defineSteps(steps)
driver.start()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link crossorigin="anonymous" integrity="sha384-cH28etaYXGV0odKyp4NzakDm9jgWghOa00YPrGTYUf1Ka8qTcQw9NO456x/4ZLVY"
href="https://lib.baomitu.com/driver.js/0.9.8/driver.min.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-iw67aNAQa9PD3IxD5gYwEb9FOuItrWzUITZT3EUrQMt+pSzPUdNsJcL2dI2NJ9Mp"
src="https://lib.baomitu.com/driver.js/0.9.8/driver.min.js"></script>
<title>driver</title>
<style>
.box-1 {
width: 100px;
height: 100px;
background-color: #1aa094;
display: inline-block;
}
.box-2 {
width: 200px;
height: 200px;
background-color: #FF6347;
float: right;
}
.box-3 {
margin-top: 400px;
background-color: #00a2d4;
float: right;
}
/*
* 隐藏引导中的关闭按钮，必须到最后一步才能关闭
*/
div#driver-popover-item .driver-popover-footer button {
display: none;
}
</style>
</head>
<body>
<div class="box-2" data-vale="3">
2
</div>
<script>
const driver = new Driver({
allowClose: false, // 是否点击遮罩关闭
overlayClickNext: false, //是否允许点击遮罩时移到到下一步
doneBtnText: "我知道了", // 最终按钮上的文本, 最后一步 按钮文案
closeBtnText: "跳过", // 默认的 关闭 按钮文案
nextBtnText: "下一步", // 默认的 下一步 按钮文案
prevBtnText: "上一步", // 默认的 上一步 按钮文案
overlayClickNext: true,
padding: 10, // 边距
// 覆盖即将清除时调用
onReset: (e) => {
console.log("onReset 关闭", e)
if (driver.hasNextStep()) {
console.log("验证是否有下一步", driver.hasNextStep())
return false;
}
},
// 在任何步骤转到下一步时调用
onNext: (e) => {
const box1 = e.node
const dataValue = box1.getAttribute('data-vale');
if (dataValue == 3) {
let a = {
element: '.box-3',
popover: {
title: "第三步",
description: '这是three',
//position: 'bottom'
}
}
channel.postMessage(a);
}
console.log("onNext", e)
},
// 在任何步骤转到上一步时调用
onPrevious: (e) => {
//如果没有上一步，阻止执行
if (!driver.hasPreviousStep()) {
console.log("验证是否有上一步", driver.hasPreviousStep())
driver.preventMove();// 阻止当前移动
return;
}
console.log("onPrevious", e)
}
});
let steps = [
{
element: '.box-3',
popover: {
title: "第三步",
description: '这是three',
//position: 'bottom'
}
}
];
const channel = new BroadcastChannel('myChannel');
channel.onmessage = function (event) {
steps.unshift(event.data)
driver.defineSteps(steps)
driver.start()
console.log(event.data);
}
</script>
</body>
</html>
标签：box,right,console,log,一步,driver,新手,思路,页面 From： https://www.cnblogs.com/zxh-bug/p/17927595.html