introjs 用法 新手引导

效果图：

一、安装

npm install intro.js --save

二、引入

如果全局引入的话使用下面代码，在main.ts引入

import IntroJs from 'intro.js'
import 'intro.js/introjs.css';

Vue.use(IntroJs);

vue.config.js加入以下代码

module.exports = {
	……
	configureWebpack: {
	  plugins: [
	    new webpack.ProvidePlugin({
	      introJs: ['intro.js', 'introJs']
	    })
	  ]
	},
	……
}

三、封装

我这边是封装在src/utils/intro.ts，代码如下

import introJs from "intro.js";
import "intro.js/introjs.css";
import "@/styles/intro.scss";
export const intro = introJs;

interface Step {
  element?: string;
  intro: string;
  position?: string;
}

interface Options {
  steps: Step[]; // 引导步骤
  prevLabel?: string; // 返回上一步的按钮的字符串
  nextLabel?: string; // 返回下一步的按钮的字符串
  skipLabel?: string; // 跳过引导的按钮的字符串
  doneLabel?: string; // 结束按钮的字符串
  showBullets?: boolean;  // 未知
  highlightClass?: string;  // 高亮所使用的class名
  hidePrev?: boolean;  // 是否在第一步隐藏上一步
  hideNext?: boolean;  // 是否在最后一步隐藏下一步
  showStepNumbers?: boolean;  // 是否显示当前步骤的索引数字
  scrollToElement?: boolean;  // 未知
  showButtons?: boolean;  // 是否显示所有按钮
  disableInteraction?: boolean;  // 引导框内视图是否可交互
  tooltipClass?: string;  // 提示框所使用的class名
  showProgress?: boolean; // 是否显示进度条
  overlayOpacity?: number;  // 蒙版的透明度
  exitOnEsc?: boolean; // 是否使用键盘Esc退出
  exitOnOverlayClick?: boolean; // 是否允许点击空白处退出
  helperElementPadding?: number;  // 提示边框的padding
}

const baseOptions: Options = {
  steps: [],
  prevLabel: "上一步",
  nextLabel: "下一步",
  skipLabel: "跳过",
  doneLabel: "结束",
  showBullets: false,
  highlightClass: "introjs",
  hidePrev: true,
  hideNext: true,
  showStepNumbers: false,
  scrollToElement: true,
  disableInteraction: false,
  tooltipClass: "intro-no-pre",
  showProgress: false,
  overlayOpacity: 0.5,
  exitOnEsc: false,
  exitOnOverlayClick: false,
  helperElementPadding: 1
};

const getIntro = (options: Options) => {
  return new introJs().setOptions(
    Object.assign(JSON.parse(JSON.stringify(baseOptions)), options)
  );
};

export const homeIntro = getIntro({
  disableInteraction: true,
  tooltipClass: "intro-no-skip",
  steps: [
    {
      element: "#companySelect",
      intro: "切换公司",
      position: "right",
    },
    {
      element: "#sideMenu",
      intro: "功能模块导航栏",
      position: "right",
    },
    {
      element: "#headerSearch",
      intro: "搜索栏",
      position: "bottom"
    },
    {
      element: "#userAction",
      intro: "消息提醒与个人中心",
      position: "bottom"
    },
    {
      element: "#archive",
      intro: "文件列表区",
      position: "right"
    },
  ]
});

export const adminsiteIntro = getIntro({
  showButtons: false,
  steps: [
    {
      element: "#adminsiteStep",
      intro: "这是我的企业",
      position: "right",
    },
  ]
});

export const companyIntro = getIntro({
  tooltipClass: "intro-no-skip-and-end",
  steps: [
    {
      element: "#companyCheck",
      intro: "点击“申请认证”，可进行企业认证",
      position: "right",
    },
    {
      element: "#adminsiteUser",
      intro: "点击“用户管理”，管理公司成员",
      position: "right",
    },
  ],
});
export const userControlIntro = getIntro({
  tooltipClass: "intro-no-skip-and-end-and-next",
  steps: [
    {
      element: "#addUser",
      intro: "点击“新增”，邀请成员",
      position: "bottom",
    },
  ],
});

export const userAddIntro = getIntro({
  tooltipClass: "intro-useradd",
  steps: [
    {
      element: ".el-dialog__wrapper",
      intro: "通过邮箱或手机号邀请成员，并设置成员权限",
      position: "right",
    },
  ],
});

四、CSS

这里使用的是scss

.introjs {
  background-color: transparent !important;
  box-shadow: 0 0 8px 0 red !important;
}

.intro-base {
  width: 300px;
  font-size: 17px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  padding: 14px 26px 14px 13px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  &::before {
    content: "引导";
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
  }
  .introjs-button {
    font-size: 15px;
    color: #8ebcff;
    background: #fff;
    border: 1px solid #8ebcff;
  }
  .introjs-tooltiptext {
    text-indent: 2em;
  }
}

.intro-no-pre {
  @extend .intro-base;
  .introjs-prevbutton {
    display: none;
  }
}

.intro-no-skip {
  @extend .intro-no-pre;
  .introjs-skipbutton {
    display: none;
  }
  .introjs-donebutton {
    display: inline-block;
  }
}

.intro-no-skip-and-end {
  @extend .intro-no-skip;
  .introjs-skipbutton {
    display: none;
  }
}

.intro-no-skip-and-end-and-next {
  @extend .intro-no-skip-and-end;
  .introjs-nextbutton {
    display: none;
  }
}

.intro-useradd {
  @extend .intro-no-skip-and-end-and-next;
  left: calc(50% + 300px) !important;
  top: calc(15vh + 141px) !important;
  margin: 0 !important;
}

五、使用示例

import { homeIntro, adminsiteIntro } from "@/utils/intro";
adminsiteIntro.exit()  // 结束某个引导
homeIntro.start().oncomplete(async ()=>{
        await this.$store.commit('setIntro', {home:false})
      })  // 开始某个引导，引导完成后触发 vuex