下面两个插件皆可实现，具体用法如下： ## 1.driver.js：https://madewith.cn/766 安装：`npm i driver.js` ``` html：需要绑定选择器：class、id等 <span class="sq ys">申请</span> <span class="xz ys">选择</span> <span class="oa ys">oa</span> <span class="rwfp">任务分配</span> <span class="ypjsqr">样品接收确认</span> <span class="syjh">试验计划</span> <span class="lck">流程卡</span> <span class="bg">报告</span> <span class="cs">测试</span> ``` ``` 引入和使用、 <script> import Driver from "driver.js"; import "driver.js/dist/driver.min.css"; export default { mounted() { this.showDriver(); }, data() { return { }; }, methods: { showDriver() { const steps = [ { element: document.querySelector(".sq"), //获取元素节点 popover: { title: "可靠性申请", description: "申请操作", position: "bottom-center", //提示框的位置 }, }, { element: document.querySelector(".xz"), popover: { title: "可靠性试验选择", description: "试验选择", position: "bottom-center", }, }, { element: document.querySelector(".oa"), popover: { title: "可靠性试验", description: "oa返回", position: "bottom-center", }, }, { element: document.querySelector(".rwfp"), popover: { title: "任务分配", description: "分配", position: "bottom-center", }, }, { element: document.querySelector(".ypjsqr"), popover: { title: "样品接收确认", description: "接收样品", position: "bottom-center", }, }, { element: document.querySelector(".syjh"), popover: { title: "试验计划", description: "项目计划", position: "bottom-center", }, }, { element: document.querySelector(".lck"), popover: { title: "流程卡", description: "填写记录", position: "bottom-center", }, }, { element: document.querySelector(".bg"), popover: { title: "报告", description: "报告编辑->审核->生成下载", position: "bottom-center", }, }, { element: document.querySelector(".cs"), popover: { title: "测试一下", description: "右侧", position: "right-center", }, }, ]; const driver = new Driver({ //初始化引导页 doneBtnText: "知道了", // 结束按钮的文字 allowClose: false, // 是否可以通过点击遮罩层关闭指引 stageBackground: "#fff", // 突出显示元素的背景颜色 nextBtnText: "下一步", // 下一步按钮的文字 prevBtnText: "上一步", // 上一步按钮的文字 closeBtnText: "关闭", // 关闭按钮的文字 keyboardControl: false, // 是否允许键盘操控 xCloseButton: false, // 将关闭按钮作为X放在弹出 }); driver.defineSteps(steps); driver.start();//执行 }, }, }; </script> ```  ## 2.插件vue-tour：https://pulsardev.github.io/vue-tour/ 安装`npm i vue-tour ` ``` <!-- html --> <template> <div> <span class="sq ys">申请</span> <span class="xz ys">选择</span> <span class="oa ys">oa</span> <span class="rwfp ys">任务分配</span> <span class="ypjsqr ys">样品接收确认</span> <span class="syjh ys">试验计划</span> <span class="lck ys">流程卡</span> <span class="bg ys">报告</span> <!-- 组件 --> <v-tour name="myTour" :steps="steps"></v-tour> </div> </template> ``` ``` 导入使用：此处单独引入了，也可以放入main.js全局引入 <script> import Vue from "vue"; import VueTour from "vue-tour"; require("vue-tour/dist/vue-tour.css"); Vue.use(VueTour); export default { data() { return { // VueTour步骤 steps: [ { target: ".sq", // We're using document.querySelector() under the hood header: { title: "Get Started", }, content: ` <strong>申请</strong>!`, }, { target: ".xz", // We're using document.querySelector() under the hood header: { title: "step2", }, content: ` <strong>选择</strong>!`, }, { target: ".oa", // We're using document.querySelector() under the hood header: { title: "step3", }, content: ` <strong>oa审批</strong>!`, }, { target: ".rwfp", // We're using document.querySelector() under the hood header: { title: "step4", }, content: ` <strong>任务分配</strong>!`, }, { target: ".ypjsqr", // We're using document.querySelector() under the hood header: { title: "step5", }, content: ` <strong>样品接收确认</strong>!`, }, { target: ".syjh", // We're using document.querySelector() under the hood header: { title: "step6", }, content: ` <strong>试验计划</strong>!`, }, { target: ".lck", // We're using document.querySelector() under the hood header: { title: "step7", }, content: ` <strong>流程卡</strong>!`, }, { target: ".bg", // We're using document.querySelector() under the hood header: { title: "step8", }, content: ` <strong>报告</strong>!`, }, ], }; }, mounted() { //加载 this.$tours["myTour"].start(); }, created() {}, methods: {}, }; </script> ```  扩展：Shepherd