安装后导入一下,文档教程在node_module
里面找对应文件夹查看阅读文档
npm i vue-tour
import VueTour from vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)
演示效果
如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/584ab1c3ca6538842cb7f79af0d387d9.gif#pic_center)
自定义引导组件
,此组件在你觉得需要的地方引用即可
<!--
* 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() { },
}
}
</script>
<style lang='scss' scoped>
div[data-v-step="tour-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"] {
position: fixed;
top: 16%;
left: 55%;
width: 160px;
height: 60px;
background: transparent;
pointer-events: none;
}
div[data-v-step="tour-ssh_configuration-1"] {
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;
}
div[data-v-step="tour-zone-2"] {
position: fixed;
top: 8%;
right: 20px;
width: 220px;
height: 100px;
background: transparent;
}
div[data-v-step="tour-firewall"] {
position: fixed;
top: 22%;
left: 14%;
width: 420px;
height: 125px;
background: transparent;
}
div[data-v-step="tour-firewall-1"] {
position: fixed;
top: 27%;
right: 17px;
width: 190px;
height: 65px;
background: transparent;
}
div[data-v-step="tour-firewall-2"] {
position: fixed;
top: 27%;
right: 50px;
width: 190px;
height: 65px;
background: transparent;
}
div[data-v-step="tour-patroInspection"] {
position: fixed;
top: 60px;
right: 0px;
width: 245px;
height: 80px;
background: transparent;
}
.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的键名进行一一对应,其他我已经封装好了,如有疑问评论区聊。