前端新手导航页--vue3--vue3-tour使用

写在前面：
有些功能写着可能被折叠，不说一声根本就看不到。所以需要新手引导来进行操作。本文基于vue3开发，使用vue3-tour组件。

安装

pnpm install vue3-tour
1

导入

在main.ts中
加入下面

// @ts-ignore
import Vue3Tour from "vue3-tour";

import 'vue3-tour/dist/vue3-tour.css'
1
2
3
4

然后在进行全局注册

app.use(Vue3Tour)
1

使用

如果不需要函数调用，则什么地方都可以，如我想在某个点击的时候触发，那么就将下面组件加到对应地方。

    <v-tour
        :options="reactData.myOptions"
        :steps="reactData.steps"
        name="myTour"
    >
    v-tour>
1
2
3
4
5
6

const reactData = reactive({
  myOptions: {
    useKeyboardNavigation: false,
    labels: {
      buttonSkip: "跳过",
      buttonPrevious: "上一步",
      buttonNext: "下一步",
      buttonStop: "完成",
    },
  },
  steps: [
    {
      target: "#绑定组件的id",
      header: {
        title: "标题",
      },
      content: "具体内容",
    },
    {
      target: "#id",
      header: {
        title: "title",
      },
      content: "",
    },
  ],
});
let tours: any = null;
onMounted(() => {
  const internalInstance = getCurrentInstance();
  if (internalInstance) {
    tours = internalInstance.appContext.config.globalProperties.$tours;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

选项options

选项：

useKeyboardNavigation

boolean, // 是否通过键盘的←, → 和 ESC 控制指引

labels

字典 // 指引项的按钮文案

• buttonSkip: “跳过指引”, // 跳过文案
• buttonPrevious: “上一步”, // 上一步文案
• buttonNext: “下一步”, // 下一步文案
• buttonStop: “结束” // 结束文案

highlight

boolean // 是否高亮显示激活的的target项

step步骤

核心的步骤
一个数组，每个元素包括对应的步骤

target

string // 选择器当前项的id或class或data-v-step属性

页面全局可选，无论是不是在这个组件内，只要可以定位到就可以了。

header

• title
  string // 标题

content:

string //当前项指引内容

params:

• placement: “bottom”, // 指引在target的位置，支持上、下、左、右
• highlight: false, // 当前项激活时是否高亮显示
• enableScrolling: false // 指引到当前项时是否滚动轴滚动到改项位置

before

如果您需要在步骤之前进行UI设置工作，则可以在任何/每个步骤中包含一个函数 你的脚步。此函数将在呈现开始/下一步/上一步之前被调用。该函数必须返回一个承诺。该函数在 、 和触发时被调用。当承诺被拒绝时，它不会移动到下一步或上一步。如果承诺被解析，那么它将沿着指定的方向移动。beforestartnextSteppreviousStep

当您需要在步骤之间更改屏幕上显示的内容时，会使用它。例如，您可能想要隐藏 一组菜单并打开一个屏幕，或者您要执行异步操作。这在单页应用程序中特别有用。

before: type => new Promise((resolve, reject) => {
      // 耗时的UI渲染或异步操作
      resolve('foo')
    })
1
2
3
4

组件

    <v-tour
        :options="reactData.myOptions"
        :steps="reactData.steps"
        name="myTour"
    >
    v-tour>
1
2
3
4
5
6

回调

Vue Tour 提供了回调，允许您在游览的不同时刻执行自定义操作
目前有四个回调

需要在属性上填入一个字典类型，key为回调方法，value为执行方法

<v-tour name="myTour" :steps="steps" :callbacks="myCallbacks">
1

const  myCallbacks = {
    onPreviousStep: myCustomPreviousStepCallback(),
    onNextStep: myCustomNextStepCallback()
}
myCustomPreviousStepCallback (currentStep) {
    console.log('已在步骤上调用自定义previousStep回调' + (currentStep + 1))
  },
myCustomNextStepCallback (currentStep) {
    console.log('已在步骤上调用自定义nextStep回调 ' + (currentStep + 1))

    if (currentStep === 1) {
      console.log('从步骤2到步骤3调用了自定义nextStep回调')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14