angular7 使用Intro.js – 为您的网站提供更好的用户指引

• Intro.js中文介绍
• Intro.js官网

最近在做angular7的项目，需要做页面引导，搜集了一下资料，应用到项目中还是比较简单，废话不多说直接上代码

 1. 安装 intro.js
	npm install intro.js --save
	
 2. 在公共style.scss引入样式文件（自行添加即可，不一定这样添加）
 	
 	@import "../node_modules/intro.js/introjs.css";
 
 4. 在组件中使用

	//ts 部分

 	 import IntroJs from 'intro.js'
	//访问引导页（在 ngOnInit中调用this.guide() 即可）
	guide() {
	  IntroJs().setOptions({
	    // tooltipClass: "intro-no-pre",
	    exitOnOverlayClick: false,
	      prevLabel: "上一步",
	      nextLabel: "下一步",
	      skipLabel: "跳过",
	      doneLabel: "结束"
	  }).oncomplete(function () {
	      //点击跳过按钮后执行的事件
	  }).onexit(function () {
	      //点击结束按钮后， 执行的事件
	  }).start();
	}
	// 注意在页面销毁的时候解除 IntroJs
	ngOnDestroy(){
	    IntroJs().exit()
	  }
	// html 部分
	 	<div data-step="1" data-intro="这里是步骤1!" style="color: #000000;">这里是步骤1</div>
  		<div data-step="2" data-intro="这里是步骤2!" style="color: #000000;">这里是步骤2</div>
 		<div data-step="3" data-intro="这里是步骤3!" style="color: #000000;">这里是步骤3</div> 

intro.js相关配置

{
  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
}

关于VUE使用以及样式的修改请移步至
introjs 用法 新手引导

Driverjs-前端引导页组件也不错

1. github：https://github.com/kamranahmedse/driver.js
2. 用法和用例介绍： https://kamranahmed.info/driver.js/
3. 简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js