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