更加具体的内容可以访问Shepherd的官网
这里只是简单介绍操作用法
获取Shepherd的相关资源
<link rel="stylesheet" href="dist/css/shepherd.css"/>
<script src="dist/js/shepherd.js"></script>
npm导入依赖的用法在npm官网搜索Shepherd也有介绍
用法:
- 初始化Shepherd插件
// 初始化Shepherd并设置默认参数以及第一步引导
var shepherd = new Shepherd.Tour({
// 设置默认引导配置
defaultStepOptions: {
// 引导左上角取消按钮图标的配置
cancelIcon: {
enabled: true, // 默认为true
},
// 指定引导盒子的类名, 用于后续自定义样式, 类名可叠加
classes: 'custom-class-1 shepherd-class-2',
// 滚动方式
scrollTo: {
behavior: 'smooth',
block: 'center'
}
},
// 添加第一步引导
steps: [
{
// 设置引导标题
title: '欢迎使用本产品',
// 设置引导文本
text: '这是第一个引导说明, 你好呀!朋友',
// 设置指向的目标元素
attachTo: {
// 目标元素
element: '.hero-welcome',
// 引导DOM位于目标元素的方位
on: 'bottom'
},
// 设置底部按钮
buttons: [
{
action: function() {
// Shepherd退出引导的方法
return this.cancel();
},
// 颜色是否突出, 设置次要的颜色就不为突出
secondary: true,
text: 'Exit'
},
{
action: function() {
// Shepherd执行下一步引导的方法
return this.next();
},
text: 'Next'
}
],
id: 'welcome' // 用于Shepherd step的唯一标识符
}
],
// 是否背景突出引导, 默认是false
useModalOverlay: true
});
- 添加引导流程
const element = document.createElement('p');
element.innerText = '引导可以自定义DOM内容.';
// 定义一系列引导步骤
const steps = [
{
title: '第一步',
// 可以直接写入html
text: element,
attachTo: {
element: '.hero-including',
on: 'bottom'
},
buttons: [
{
action: function() {
return this.back();
},
secondary: true,
text: 'Back'
},
{
action: function() {
return this.next();
},
text: 'Next'
}
],
id: 'step1'
},
{
title: '第二步',
text: '第二步内容',
attachTo: {
element: '.hero-example',
on: 'right'
},
buttons: [
{
action: function() {
return this.back();
},
secondary: true,
text: 'Back'
},
{
action: function() {
return this.next();
},
text: 'Next'
}
],
id: 'step2'
},
{
title: '第三步',
text: '第三步内容.',
attachTo: {
element: '.hero-example',
on: 'left'
},
buttons: [
{
action: function() {
return this.back();
},
secondary: true,
text: 'Back'
},
{
action: function() {
return this.next();
},
text: 'Next'
}
],
id: 'step3'
}
];
// 将定义好的引导添加进来
shepherd.addSteps(steps);
- shepherd允许反复添加步骤
shepherd.addStep({
title: '后续添加',
text: '这是后续添加的步骤',
// 当没有指定依附的元素时, shepherd会选择默认显示在屏幕的中间
buttons: [
{
action: function() {
return this.back();
},
secondary: true,
text: 'Back'
},
{
action: function() {
return this.next();
},
text: 'Next'
}
],
id: 'step4'
});
shepherd中cancel方法表达,直接退出引导,结束引导的意思, 而当调用next方法发现没有定义的step时,也会隐式调用cancel方法,退出引导
- 启动
定义好的引导, 启动也很简单, 调用start方法即可
shepherd.start();
