页面分布引导（driver.js）

页面分布引导（driver.js）

​ 最近由于有一个需求——做新手指引，然后想通过driver.js实现，由此记录一下其用法。Driver.js 是一个轻量级（~ 4kb gzip），无需依赖但功能强大的原生 JavaScript 。兼容所有主流浏览器，其作用在于能够用来引导用户展示该网站的部分功能，突出显示页面的任何项目，并且可以将用户的注意力集中在页面上。

1、安装

1. 使用yarn安装

   yarn add driver.js

2. 使用npm安装

   npm install driver.js --save

2、引入

1. vue项目中

   import Driver from 'driver.js'
   import 'driver.js/dist/driver.min.css'
   

2. 单一页面文件

   <link rel="stylesheet" href="/dist/driver.min.css">
   <script src="/dist/driver.min.js"></script>
   

3. 通过**cdn**方式引入

   <link 
   href="https://cdn.bootcdn.net/ajax/libs/driver.js/0.9.8/driver.min.css" rel="stylesheet">
   
   <script 
   src="https://cdn.bootcdn.net/ajax/libs/driver.js/0.9.8/driver.min.js"
   ></script>
   

3、使用

​ 页面分布引导功能一般都是通过匹配相应的ID或者类名（class）进行显示的

1. 显示单个标签的描述（只需要传递选择器即可）

   const driver = new Driver();
   driver.highlight("#id-name");
   // driver.highlight(".class-name");
   

2. 控制用以描述的文本信息

   const driver = new Driver();
   driver.highlight({
   	element: '#id-name', // 匹配的ID（可以替换为类名）
   	popover: {
   		title: "", // 显示的标题（可以使用HTML标签）
   		description: "", // 用于描述的信息（可以使用HTML标签）
   		position: "" // 文本的位置（top、right、bottom、left）
   	}
   });
   

3. 创建指引组（功能介绍）

   上述的情况一般只能应用于某一个标签或者某一块区域，当需要进行连续的指引时，以上方法就显得有些为难了。在这种类似于功能介绍的需求下，我们基本都会使用 defineSteps 方法了。

   1. 首先，创建对应的元素信息数组：

   const steps = [
   	{
   		element: '#one',
   		popover: {
   			title: "one",
   			description: '这是one',
   			position: 'top'
   		}
   	},
   	{
   		element: '#two',
   		popover: {
   			title: "two",
   			description: '这是two',
   			position: 'right'
   		}
   	},
   	{
   		element: '#three',
   		popover: {
   			title: "three",
   			description: '这是three',
   			position: 'bottom'
   		}
   	}
   ]
   

   2. 然后，创建功能介绍：（引用上述的steps数组）

   const driver = new Driver()
   driver.defineSteps(steps)
   

   3. 最后，调用start方法

   driver.start()
   

4、修改样式

​ 在使用driver.js开发功能介绍的操作时，可能会想限制用户的操作，例如去除关闭按钮、取消前往上一步操作等等。以下将通过修改样式的方式隐藏相关的按钮。

• 隐藏关闭按钮

  [class*="driver-close-btn"] {
      visibility: hidden;
      /* display: none; */
  }
  

• 隐藏上一步按钮

  [class*="driver-prev-btn"] {
      visibility: hidden;
      /* display: none; */
  }
  

• 修改弹出框的样式

5、检测当前引导的状态（通过监听onNext方法）

1. 在实例化对象中添加参数（引入 onNext 方法）

   const driver = new Driver({
   	onNext: ele => {
   		console.log(ele)
   	}
   })
   

2. 在指引组列表添加onNext方法

   const steps = [
   	{ 
   		element: '#el-index__iframe',
           popover: {
           	title: '这是标题',
           	description: `<i>这是描述的内容</i>`,
           	position: 'right'
       	},
           onNext: ele => {
           	console.log(ele);
   		}
       },
   	{
   		element: '#two',
   		popover: {
   			title: "two",
   			description: '这是two',
   			position: 'right'
   		},
   		onNext: ele => {
   			console.log("指引结束")
   		}
   	},
   ] 
   

6、增加完成引导回调事件

​ 当引导操作完成时，会触发onReset事件。通过该事件，以达到监听引导操作是否完成

​ （引导结束才会触发该事件）。

const driver = new Driver({
	onReset: ele => {
		// 获取当前的引导数组
		let steps = driver.getSteps()
		// 检测当前是否结束（true——结束）
		console.log(steps[steps.length-1] == ele)
	}
})

const driver = new Driver({
	onReset: ele => {
		// 获取当前的引导数组
		let steps = driver.getSteps()
		// 检测当前是否结束（true——结束）
		console.log(steps[steps.length-1] == ele)
	}
})