vue步骤引导插件 vue-intro

1、安装依赖

 	npm i intro.js --save   
	npm i vue-introjs --save

2、在main.js中引入

import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式

3、使用方式：data 内绑定标签元素的选择器数组

setGuide() {
	let data = [
		{ element: document.querySelector('.el-upload-draggr'), intro: '<img src="https://resources.dudao360.com/ddzs%2Fddzs01.GIF"  
        alt=""  style="width: 100%;"><p style="margin-top: 10px;text-align: center">
        先把文件拖进来或者上传到这里，系统可以自动选择公告类型了，快来试试吧</p>',
         position: 'right' },
		{ element: document.querySelector('.el-upload-draggr'),
         intro: '步骤2：对应Id为#step_2的元素进行选择提示。', position: 'left' }]
	this.$intro().setOptions({
		steps: data, /*绑定数组data*/
		prevLabel: "上一步",
		nextLabel: "下一步",
		skipLabel: "跳过",
		doneLabel: "完成",
		tooltipPosition: 'bottom',/* 引导说明框相对高亮说明区域的位置 */
		tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
		highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
		exitOnEsc: true,/* 是否使用键盘Esc退出 */
		exitOnOverlayClick: true,/* 是否允许点击空白处退出 */
		showStepNumbers: false,/* 是否显示说明的数据步骤*/
		keyboardNavigation: true,/* 是否允许键盘来操作 */
		showButtons: true,/* 是否按键来操作 */
		showBullets: true,/* 是否使用点点点显示进度 */
		showProgress: false,/* 是否显示进度条 */
		scrollToElement: true,/* 是否滑动到高亮的区域 */
		overlayOpacity: 0.8, /* 遮罩层的透明度 */
		positionPrecedence: ["bottom", "top", "right", "left"],/* 当位置选择自动的时候，位置排列的优先级 */
		disableInteraction: true, /* 是否禁止与元素的相互关联 */
		hintPosition: 'top-middle', /* 默认提示位置 */
		hintButtonLabel: 'Got it'/* 默认提示内容 */
	}).oncomplete(() => {
		//点击结束按钮后执行的事件
	}).onexit(() => {
		//点击跳过按钮后执行的事件
	}).start()
}

效果图：