Intro.js使用教程

Intro.js是一个轻量级的js库，可以快速实现新手引导功能
效果展示：

intro.js

1. 安装intro.js插件

npm install intro.js --save复制

2. 引入插件

// main.js
import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
 
Vue.prototype.$intro = intro;复制

3. 页面使用

html

<el-dropdown class="mr-20" @command="handleCommand">
	<el-dropdown-menu slot="dropdown">
	    <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
	    <el-dropdown-item command="beginIntro">新手引导</el-dropdown-item>
	</el-dropdown-menu>
</el-dropdown>复制

js

data() {
    return {
      introOption: { 
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '开始使用',
        tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
        exitOnEsc: true, /* 是否使用键盘Esc退出 */
        exitOnOverlayClick: false, /* 是否允许点击空白处退出 */
        keyboardNavigation: true, /* 是否允许键盘来操作 */
        showBullets: false, /* 是否显示小圆点 */
        showStepNumbers: true, /* 是否显示数字 */
        stepNumbersOfLabel: '/', 
        showProgress: false, /* 是否显示进度条 */
        scrollToElement: true, /* 是否滑动到高亮的区域 */
        overlayOpacity: 0.65, // 遮罩层的透明度 0-1之间
        positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 当位置选择自动的时候，位置排列的优先级 */
        disableInteraction: true, /* 是否禁止与元素的相互关联 */
        hidePrev: false, /* 是否在第一步隐藏上一步 */
        hideNext: false, /* 是否在最后一步隐藏下一步 */
        steps: [], /* steps步骤 */
      }
    };
},
methods: {
	initGuide() {
      // 绑定标签元素的选择器数组
      this.introOption.steps = [
        { title: '左侧菜单', element: '.el-menu', intro: "点击左侧菜单，可以进入相应的页面"},
        { title: '顶部菜单', element: '.tags-view-item.active', intro: "点击菜单，可以快速定位到浏览过的页面" },
        { title: '主题设置', element: '.el-icon-s-tools', intro: '点击此处可修改主题色' }
      ]
      this.$intro()
        .setOptions(this.introOption)
        // 点击结束按钮后执行的事件
        .oncomplete(() => {
          console.log('点击结束按钮后执行的事件')
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          console.log('点击跳过按钮后执行的事件')
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          console.log('确认完毕之后执行的事件')
        })
        .start()
	},
	handleCommand(type){
	  if(type == 'loginOut'){
	    this.loginOut();
	  }else if(type == 'beginIntro'){
	    this.initGuide();
	  }
	}
}
 复制

css

<style lang="less">
/* 重置引导组件样式 */
.intro-tooltip {
  width: 500px;
  max-width: 500px;
  padding: 32px;
  border-radius: 16px;
  box-sizing: border-box;
}
/* 引导提示框的位置 */
.introjs-bottom-left-aligned {
  left: 45% !important;
}
.introjs-right,
.introjs-left {
  top: 30%;
}
.intro-highlight {
  background: rgba(255,255,255,0.5);
}
.introjs-arrow {
  border: 8px solid transparent;
}
.introjs-arrow.top {
  left: 16px;
  top: -16px;
}
.introjs-arrow.left {
  left: -16px;
  top: 16px;
}
.introjs-arrow.top-right {
  right: 16px;
  top: -16px;
}
.introjs-tooltip-header {
  padding: 0 !important;
}
.introjs-tooltip-title {
  font-size: 20px;
}
.introjs-skipbutton {
  width: auto;
  height: auto;
  line-height: 30px;
  color: rgba(0,0,0,.45) !important;
  font-size: 16px !important;
  font-weight: normal !important;
}
.introjs-tooltiptext {
  line-height: 32px;
  font-size: 16px !important;
  padding: 15px 0 !important;
  color: rgba(0,0,0,.65);
}
.introjs-helperNumberLayer {
  display: inline-block;
  position: absolute;
  bottom: 32px;
  padding: 22px 0;
}
/* 提示框按钮 */
.introjs-tooltipbuttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: none !important;
}
.introjs-button {
  text-align: center;
  text-shadow: none;
  padding: 9px 20px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  border: none !important;
  &:focus {
    box-shadow: none!important;
  }
}
.introjs-prevbutton {
  color: rgba(0,0,0,0.45);
  background: #fff !important;
}
.introjs-nextbutton {
  margin-left: 4px;
  color: #fff !important;
  background-color: #D0392D !important;
}
</style>复制

至此，新手引导功能就已经实现啦！
Tips: steps 配置项中的 intro 属性 – 提示框介绍文本，可以直接书写html字符串