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

安装后导入一下，文档教程在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: `<p>点击开关将【启用/关闭】SSH访问IP段。</p>`, placement: 'bottom', before: before({ path: '/ops/ssh_configuration' }) },
  "tour-ssh_configuration-1": { content: `<p>此处对ssh网段进行配置。</p>`, placement: 'right', before: before({ path: '/ops/ssh_configuration' }) },
  "tour-zone": { content: `<p>此处将对设置地区配置。</p>`, placement: 'bottom', before: before({ path: '/configuration/zone' }) },
  "tour-zone-1": { content: `<p>点击配置当前城市地区编码。</p>`, placement: 'bottom', before: before({ path: '/configuration/zone' }) },
  "tour-zone-2": { content: `<p>点击【导入/导出对文件进行操作】。</p>`, placement: 'bottom', before: before({ path: '/configuration/zone' }) },
  "tour-firewall": { content: `<p>点击按钮可以【开启/关闭】防火墙。</p>`, placement: 'bottom', before: before({ path: '/ops/firewall', query: { activeName: 'first' } }) },
  "tour-firewall-1": { content: `<p>此处添加端口号进行白名单配置。</p>`, placement: 'bottom', before: before({ path: '/ops/firewall', query: { activeName: 'first' } }) },
  "tour-firewall-2": { content: `<p>此处添加IP端口进行白名单配置。</p>`, placement: 'bottom', before: before({ path: '/ops/firewall', query: { activeName: 'second' } }) },
  "tour-patroInspection": { content: `<p>点击一键巡检将会获取最新系统日志，日志导出下载当前文件。</p>`, placement: 'bottom', before: before({ path: '/ops/patroInspection' }) },
  "tour-network": { content: `<p>此处对网络主机进行配置，保存将重启。</p>`, placement: 'right', before: before({ path: '/ops/network' }) },
}

export default {
  name: 'tour',
  data() {
    return {
      options: { startTimeout: 300, useKeyboardNavigation: true },
      steps: Object.entries(tour_map).map(([target, { content, placement, before }], index) => ({
        target: `[data-v-step="${target}"]`,
        key: target,
        content: index ? content.replace(/(?<=<p>).*(?=<\/p>)/, $1 => `${index}.${$1}`) : content,
        params: { placement, highlight: true },
        before
      })),
      callbacks: {
        onStart: this.onStart,
        onPreviousStep: this.onPreviousStep,
        onNextStep: this.onNextStep,
        onStop: this.onStop,
        onSkip: this.onSkip,
        onFinish: this.onFinish,
      },
    }
  },

  mounted() {
    this.$tours['Tour'].start();
  },

  methods: {
    onStart() {
      this.$router.push({ path: '/' });
    },
    onPreviousStep(currentStep) { },
    onNextStep(currentStep) { },
    onStop() { },
    onSkip() { },
    onFinish() { },
  }
  //  End
}

</script>

<style lang='scss' scoped>
div[data-v-step="tour-navbar"] {
  // navbar
  position: fixed;
  top: 4px;
  right: 37px;
  width: 45px;
  height: 45px;
  background: transparent;
}
div[data-v-step="tour-network"] {
  // 网络主机
  position: fixed;
  top: 20%;
  left: 50%;
  width: 650px;
  height: 380px;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: none;
}
div[data-v-step="tour-ssh_configuration"] {
  // ssh网段开关
  position: fixed;
  top: 16%;
  left: 55%;
  width: 160px;
  height: 60px;
  background: transparent;
  pointer-events: none;
}
div[data-v-step="tour-ssh_configuration-1"] {
  // ssh网段
  position: fixed;
  top: 15%;
  left: 50%;
  width: 650px;
  height: 480px;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: none;
}
div[data-v-step="tour-zone"] {
  // 设置地区
  position: fixed;
  top: 5%;
  left: 50%;
  width: calc(100% - 200px);
  height: 360px;
  background: transparent;
  transform: translateX(calc(-50% + 200px / 2));
  pointer-events: none;
}
div[data-v-step="tour-zone-1"] {
  // 设置地区
  position: fixed;
  top: 8%;
  left: 27%;
  width: 400px;
  height: 100px;
  background: transparent;
  // pointer-events: none;
}
div[data-v-step="tour-zone-2"] {
  // 设置地区
  position: fixed;
  top: 8%;
  right: 20px;
  width: 220px;
  height: 100px;
  background: transparent;
  // pointer-events: none;
}
div[data-v-step="tour-firewall"] {
  // 防火墙配置
  position: fixed;
  top: 22%;
  left: 14%;
  width: 420px;
  height: 125px;
  background: transparent;
  // pointer-events: none;
}
div[data-v-step="tour-firewall-1"] {
  // 防火墙配置
  position: fixed;
  top: 27%;
  right: 17px;
  width: 190px;
  height: 65px;
  background: transparent;
  // pointer-events: none;
}
div[data-v-step="tour-firewall-2"] {
  // 防火墙配置
  position: fixed;
  top: 27%;
  right: 50px;
  width: 190px;
  height: 65px;
  background: transparent;
  // pointer-events: none;
}
div[data-v-step="tour-patroInspection"] {
  // 一键巡检
  position: fixed;
  top: 60px;
  right: 0px;
  width: 245px;
  height: 80px;
  background: transparent;
  // pointer-events: none;
}

.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
}
/deep/ {
  .v-step__content {
    margin-bottom: 40px;
  }
  .v-step {
    background: #ffffff;
    color: #000000;
    border-radius: 10px;
    max-width: none;
  }
  .v-step__button {
    font-size: 20px;
    color: #fbc000;
    font-weight: 400;
    margin-bottom: 18px;
    margin-left: 12px;
    border-bottom: 2px solid #fbc000;
  }
  .v-step__button_first {
    color: #999;
    font-size: 16px;
    border-bottom: 0px solid #fbc000;
  }
  .v-step__button:hover {
    color: #fbc000;
  }
}
</style>

说明一下，自定义组件只需要修改css的位置和tour_map的键名进行一一对应，其他我已经封装好了，如有疑问评论区聊。