vue 中使用vue-introjs做引导动画

先看页面效果：

1、不做任何样式修改，vue-introjs默认的样式效果如下：可以配置title，跳过，上一步，下一步等

2、修改修改样式，根据自己需求去做效果如下：

web端和h5都可以使用，具体用法如下：

一、npm安装

vue-introjs 是在 Vue 中绑定 intro.js 所使用的。vue-introjs 中没有内置 intro.js，所以在使用前请确保已安装 intro.js。

npm i intro.js
npm i vue-introjs

二、webpack配置：在webpack的plugins中做以下配置

 plugins: [
    // other modules
    new webpack.ProvidePlugin({
      'introJs': ['intro.js']
    })
 ],

三、main.js中引入

安装了 intro.js 之后，webpack.ProvidePlugin 将会使用它，所以不需要在 src/main.js 中使用 import introJs from 'intro.js' 来引用。

但是需要在main.js中引入使用vue-introjs

import VueIntro from 'vue-introjs';
Vue.use(VueIntro); 
import 'intro.js/introjs.css';

四、页面中使用：需要在页面渲染完成后，使用，下面steps中配置需要引导元素的element：id或者类名即可，disableInteraction: true，与本身元素不关联，防止引导期间可以操作输入等

mounted() {
    this.$nextTick(() => {
      this.initIntro();
    });
  },
  methods: {
    initIntro() {
      let steps = [
        {
          element: "#EHRCode",
          intro:"介绍信息",
          position: "right"
        },
        {
          element: "#SpareEmail",
          intro:"介绍信息",
          position: "right"
        }
      ];
      var intro = introJs();
      intro.setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "完成",
        tooltipPosition: "bottom" /* 引导说明框相对高亮说明区域的位置 */,
        hidePrev: "true", //隐藏第一步中的上一个按钮
        tooltipClass: "xxx" /* 引导说明文本框的样式 */,
        highlightClass: "xxxxx" /* 说明高亮区域的样式 */,
        exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
        showStepNumbers: false /* 是否显示说明的数据步骤*/,
        keyboardNavigation: false /* 是否允许键盘来操作 */,
        showButtons: true /* 是否按键来操作 */,
        showBullets: false /* 是否使用点点点显示进度 */,
        showProgress: true /* 是否显示进度条 */,
        scrollToElement: true /* 是否滑动到高亮的区域 */,
        overlayOpacity: 0.8 /* 遮罩层的透明度 */,
        positionPrecedence: [
            "bottom",
            "top",
            "right",
            "left"
        ] /* 当位置选择自动的时候，位置排列的优先级 */,
        disableInteraction: true, /* 是否禁止与元素的相互关联 */
        steps:steps
      });
      intro.oncomplete(() => {
        //点击结束按钮后执行的事件
        console.log("oncomplete");
      });
      intro.onexit(() => {
        //点击跳过按钮后执行的事件
        console.log("onexit");
      });
      intro.onchange(() => {
        //点击下一步执行的事件
        console.log("onchange");
      });
      intro.start();
    },
}

五、关键字：setOption 主要参数如下：

	  /* 下一步按钮的显示名称 */
      nextLabel: 'Next →',
      /* 上一步按钮的显示名称 */
      prevLabel: '← Back',
      /* 跳过按钮的显示名称 */
      skipLabel: 'Skip',
      /* 结束按钮的显示名称 */
      doneLabel: 'Done',
      /* 引导说明框相对高亮说明区域的位置 */
      tooltipPosition: 'bottom',
      /* 引导说明文本框的样式 */
      tooltipClass: '',
      /* 说明高亮区域的样式 */
      highlightClass: '',
      /* 是否使用键盘Esc退出 */
      exitOnEsc: true,
      /* 是否允许点击空白处退出 */
      exitOnOverlayClick: true,
      /* 是否显示说明的数据步骤*/
      showStepNumbers: true,
      /* 是否允许键盘来操作 */
      keyboardNavigation: true,
      /* 是否按键来操作 */
      showButtons: true,
      /* 是否使用点点点显示进度 */
      showBullets: true,
      /* 是否显示进度条 */
      showProgress: false,
      /* 是否滑动到高亮的区域 */
      scrollToElement: true,
      /* 遮罩层的透明度 */
      overlayOpacity: 0.8,
      /* 当位置选择自动的时候，位置排列的优先级 */
      positionPrecedence: ["bottom", "top", "right", "left"],
      /* 是否禁止与元素的相互关联 */
      disableInteraction: false,
      /* 默认提示位置 */
      hintPosition: 'top-middle',
      /* 默认提示内容 */
      hintButtonLabel: 'Got it'

注意：样式可以根据自己的需求做覆盖，显示影藏某些按钮可以配置或用js隐藏

 

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！