下面兩個插件皆可實現，具體用法如下： ## 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