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

本文主要是介绍前端新手导航页--vue3--vue3-tour使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

文章目录

安装
导入
使用
选项options
- useKeyboardNavigation
- labels
- highlight
step步骤
- target
- header
- content:
- params:
- before
组件
- 回调

安装

pnpm install vue3-tour

导入

在main.ts中
加入下面

// @ts-ignore
import Vue3Tour from "vue3-tour";import 'vue3-tour/dist/vue3-tour.css'

然后在进行全局注册

app.use(Vue3Tour)

使用

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

    <v-tour:options="reactData.myOptions":steps="reactData.steps"name="myTour"></v-tour>


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;}
});

选项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')})

组件

    <v-tour:options="reactData.myOptions":steps="reactData.steps"name="myTour"></v-tour>

属性	功能
options	可选项
steps	步骤
name	名称
callbacks	回调方法

回调

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

方法	时期
onStart	开始游览时呼叫
onPreviousStep	转到上一步时调用
onNextStep	转到下一步时调用
onStop	停止游览时呼叫

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

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

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回调')}
}