【无标题】使用vue-tour制作引导页

原创

已于 2023-01-19 10:04:20 修改 · 2k 阅读

标签

#vue.js #前端 #javascript

于 2023-01-18 10:54:28 首次发布

文章介绍了如何在Vue项目中使用vue-tour库创建自定义引导组件，包括导入、配置和样式调整，用于网络配置等操作的用户引导。组件的每个步骤可以通过修改CSS位置和tour_map映射来定制，并提供了详细的示例代码。

安装后导入一下，文档教程在`node_module`里面找对应文件夹查看阅读文档

npm i vue-tour

// main.js全局导入
import VueTour from vue-tour'
require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

`演示效果`如下：

在这里插入图片描述

`自定义引导组件`，此组件在你觉得需要的地方引用即可

<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2023-01-12 
 -->


<template>
  <transition-group name="fade-transform" mode="out-in">

    <div v-for="item, index in steps" :key="item.key" :data-v-step="item.key" />

    <v-tour key="tour" name="Tour" :steps="steps" :options="options" :callbacks="callbacks">
      <template slot-scope="tour">
        <transition name="fade">
          <v-step v-if="tour.steps[tour.currentStep]" :key="tour.currentStep" :step="tour.steps[tour.currentStep]" :previous-step="tour.previousStep" :next-step="tour.nextStep" :stop="tour.stop" :skip="tour.skip" :is-first="tour.isFirst" :is-last="tour.isLast" :labels="tour.labels">

            <template v-for="(item, index) in steps">
              <div slot="actions" v-if="tour.currentStep === index">
                <button @click="index === 0 ? tour.skip() : tour.previousStep()" :class="index === 0 ? 'v-step__button' : 'v-step__button v-step__button_first'">{
   
   {
   
    index === 0 ? '跳过' : '上一步' }}</button>
                <button @click="index === steps.length-1 ? tour.finish() : tour.nextStep()" class="v-step__button">{
   
   {
   
    index === steps.length-1 ? '完成引导' : index === 0 ? '立即开始' : '下一步' }}</button>
              </div>
            </template>

          </v-step>
        </transition>
      </template>
    </v-tour>

  </transition-group>
</template>

<script>
import router from "@/router";
const before = path => () => router.push(path);

const tour_map = {
   
   
  "tour-navbar": {
   
    content: `<p>此操作将会引导您进行网络配置，建议完成操作步骤引导。如已经完成配置操作，您可以使用Esc键跳过</p>`, placement: 'left' },
  "tour-ssh_configuration": {
   
    content