vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解
需求:給客戶(hù)做一個(gè)頁(yè)面引導(dǎo),教客戶(hù)怎么做
效果:
一.安裝driver.js
# Using npm npm install driver.js # Using pnpm pnpm install driver.js # Using yarn yarn add driver.js
二.在自己需要引導(dǎo)的頁(yè)面上引入driver.js
import { driver } from "driver.js"; import "driver.js/dist/driver.css";
三.在外部建一個(gè)steps.js
const steps = [ { element: '#A', popover: { title: '幫助', description: '第一步指引', position: 'bottom' } }, { element: '#B', popover: { title: '幫助', description: '第二步指引', position: 'bottom' } }, { element: '#C', popover: { title: '幫助', description: '第三步指引', position: 'bottom' }, }, { element: '#D', popover: { title: '幫助', description: '第四步指引', position: 'bottom' }, }, ] export default steps
四.引導(dǎo)頁(yè)面里面引入steps.js,其引導(dǎo)頁(yè)面完整代碼
<template> <div class="app-container"> <div class="help"> <el-button type="success" plain @click.prevent.stop="guide">幫助</el-button> </div> <div class="one" id="A"> <h1>第一步</h1> <div>來(lái)嘍</div> </div> <div class="two" id="B"> <h1>第二步</h1> <div>來(lái)嘍</div> </div> <div class="three" id="C"> <h1>第三步</h1> <div>來(lái)嘍</div> </div> <div class="four" id="D"> <h1>第四步</h1> <div>結(jié)束</div> </div> </div> </template> <script> import { driver } from "driver.js"; import "driver.js/dist/driver.css"; import steps from "./steps"; export default { name: "index", methods:{ guide() { const driverObj = driver({ doneBtnText: '完成', // 最后一個(gè)按鈕的文本 nextBtnText: '下一步', // 下一步 prevBtnText: '上一步', // 上一步 showProgress: true,//顯示進(jìn)度條 steps: steps }); driverObj.drive(); }, } } </script> <style scoped> .help { display: flex; justify-content: right; } .one { width: 100px; } .two { margin: 0 auto; width: 100px; } .three{ width: 100px; margin: 0 0 0 1500px; } </style>
以上代碼就能實(shí)現(xiàn)其頁(yè)面引導(dǎo)的功能
到此這篇關(guān)于vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解的文章就介紹到這了,更多相關(guān)vue driver.js頁(yè)面引導(dǎo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3使用ECharts實(shí)現(xiàn)?;鶊D的代碼示例
?;鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動(dòng),在前端項(xiàng)目中,通過(guò)結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的?;鶊D,本文將通過(guò)完整的代碼示例,帶你一步步完成一個(gè)?;鶊D的實(shí)現(xiàn),需要的朋友可以參考下2025-01-01解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因?yàn)榘姹締?wèn)題在創(chuàng)建項(xiàng)目時(shí)出現(xiàn)的各種報(bào)錯(cuò)問(wèn)題,這次在運(yùn)行時(shí)出現(xiàn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關(guān)資料,需要的朋友可以參考下2023-04-04vue實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Vue.js實(shí)現(xiàn)對(duì)視頻預(yù)覽的示例代碼
本文主要介紹了Vue.js實(shí)現(xiàn)對(duì)視頻預(yù)覽的示例代碼,通過(guò)監(jiān)聽(tīng)文件選擇事件和使用FileReader API,可以實(shí)現(xiàn)視頻文件的預(yù)覽功能,感興趣的可以了解一下2025-01-01vue中組件的過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)代碼
這篇文章主要介紹了vue中組件的過(guò)渡動(dòng)畫(huà),并通過(guò)實(shí)例代碼給大家介紹了過(guò)渡動(dòng)畫(huà)的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue項(xiàng)目如何去掉URL中#符號(hào)的方法
在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號(hào)的相關(guān)資料,文中通過(guò)實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下2022-07-07Vue+Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴(kuò)展插件ol-ext,可以用來(lái)實(shí)現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動(dòng)等操作,本文將主要介紹通過(guò)Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn),需要的同學(xué)可以學(xué)習(xí)一下2021-11-11