当前位置：首页 > article >正文

introJs去实现新手指引

article 2025/2/28 15:46:28

文章目录

- 概要
- 实践
- 小结

概要

在vue-cil框架中，想采用introJs去实现新手指引；但是在路由中主界面有多个二级界面，怎么去实现多个界面联动然后实现新手指引呢？

实践

安装 intro.js；

npm install intro.js
# 或者
yarn add intro.js

配置 intro.js 在 Vue 中的使用

在 Vue 组件中引入 intro.js，并为每个二级页面设置相应的指引步骤。
实现新手指引

你可以将指引步骤定义在主界面中，然后根据路由的变化动态展示不同的步骤。这些步骤可以是页面的 DOM 元素。

示例代码：
假设你的项目结构如下：

Home.vue（主界面）
PageA.vue（二级页面A）
PageB.vue（二级页面B）

我们将在 Home.vue 中进行指引管理，然后在每个二级页面中根据需要动态更新指引。

在主界面 (Home.vue) 配置 intro.js

<template>
  <div>
    <router-view></router-view>
    <!-- 这里是主界面的指引按钮，点击后可以开始指引 -->
    <button @click="startIntro">开始新手指引</button>
  </div>
</template>

<script>
import introJs from 'intro.js';
import 'intro.js/introjs.css';

export default {
  methods: {
    startIntro() {
      const intro = introJs();

      // 为不同的页面设置不同的指引步骤
      const steps = [
        {
          element: '#element1',
          intro: '这是页面A的第一个步骤！',
          position: 'top',
        },
        {
          element: '#element2',
          intro: '这是页面B的第一个步骤！',
          position: 'bottom',
        },
      ];

      // 配置步骤
      intro.setOptions({
        steps: steps,
        showStepNumbers: true, // 是否显示步骤的数字
        hidePrev: true, // 隐藏上一步按钮
        hideNext: true, // 隐藏下一步按钮
        doneLabel: '完成',
        skipLabel: '跳过',
      });

      // 开始指引
      intro.start();
    },
  },
};
</script>

二级页面中 (PageA.vue, PageB.vue) 中设置要引导的元素

例如，在 PageA.vue 中：

<template>
  <div>
    <div id="element1">
      <h2>页面A的内容</h2>
    </div>
    <p>这里是页面A的一些内容</p>
  </div>
</template>

<script>
export default {
  created() {
    // 这里可以在页面A加载时初始化intro.js，如果需要
    console.log('PageA created');
  }
};
</script>

在 PageB.vue 中：

<template>
  <div>
    <div id="element2">
      <h2>页面B的内容</h2>
    </div>
    <p>这里是页面B的一些内容</p>
  </div>
</template>

<script>
export default {
  created() {
    console.log('PageB created');
  }
};
</script>

实现路由联动

为了实现路由和指引的联动，我们需要根据路由的变化动态地更新 intro.js 的步骤。你可以利用 Vue Router 的导航守卫来监听路由的变化，并在每个页面加载时触发相应的指引。

// 在 main.js 或者 App.vue 中配置路由守卫来处理新手指引
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import PageA from './components/PageA.vue';
import PageB from './components/PageB.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: App },
  { path: '/pageA', component: PageA },
  { path: '/pageB', component: PageB },
];

const router = new VueRouter({
  routes
});

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');

动态管理指引
在路由变化时，你可以动态地管理指引步骤：

// 在主界面或 App.vue 中，使用路由钩子来根据当前路由更新指引

export default {
  watch: {
    $route(to, from) {
      // 每当路由变化时，可以在此处重新初始化或更新 intro.js
      if (to.path === '/pageA') {
        // 如果是页面A，设置步骤并开始指引
        this.startIntroForPageA();
      } else if (to.path === '/pageB') {
        // 如果是页面B，设置步骤并开始指引
        this.startIntroForPageB();
      }
    },
  },
  methods: {
    startIntroForPageA() {
      const intro = introJs();
      intro.setOptions({
        steps: [
          { element: '#element1', intro: '欢迎来到页面A!', position: 'top' }
        ]
      });
      intro.start();
    },
    startIntroForPageB() {
      const intro = introJs();
      intro.setOptions({
        steps: [
          { element: '#element2', intro: '欢迎来到页面B!', position: 'bottom' }
        ]
      });
      intro.start();
    }
  },
};