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()
}
效果图: