vue3項(xiàng)目新用戶引導(dǎo)組件driver.js示例詳解
好用的用戶引導(dǎo)插件有 intro.js 和 driver.js 兩個(gè),對(duì)比了一下,最終還是使用了driver.js
主要有以下原因:
- 用法簡單
- 可以商用
- 總要選一個(gè)吧
項(xiàng)目使用的是vue3+ts
因?yàn)槎鄠€(gè)地方需要使用引導(dǎo),就直接做成組件使用
不廢話上代碼
yarn add driver.js 或者 npm i driver.js
組件代碼
<!-- * @Description: 新用戶引導(dǎo)組件 * @LastEditTime: 2022-08-19 11:43:25 --> <template></template> <script lang="ts" setup> import { onMounted } from "vue" import "driver.js/dist/driver.min.css"; import Driver from "driver.js"; interface IPopover { title: string, description: string, position: string, } interface IStep { element: string, popover: IPopover } interface prop { storageName: string, steps: IStep[], } const props = withDefaults(defineProps<prop>(), { storageName: 'driver', steps:()=>[] }) onMounted(() => { let flag = localStorage.getItem(props.storageName); if (!flag) { showTips(); } }); function showTips() { const driver = new Driver({ prevBtnText: "上一步", nextBtnText: "下一步", doneBtnText: "我知道了", closeBtnText: "關(guān)閉", onReset: (ele: any) => { localStorage.setItem(props.storageName, JSON.stringify({ firstVisit: false })); }, }); driver.defineSteps(props.steps); driver.start(); } </script>
頁面使用
- 導(dǎo)入組件
- 需要傳頁面名稱storageName用于判斷用戶是否第一次進(jìn)入該頁面
- steps這個(gè)頁面里面需要引導(dǎo)的內(nèi)容列表
<!-- * @Description: 需要引導(dǎo)的頁面 * @LastEditTime: 2022-08-19 11:41:55 --> <template> <div class="test-guide"> <h1>測試driver.js</h1> <el-button id="first-ele" type="primary">首頁</el-button> <el-button id="second-intro" type="warning">幫助</el-button> <el-button id="third-des" type="primary">聯(lián)系我們</el-button> </div> <Driver storageName='yingdaoye' :steps="steps"></Driver> </template> <script lang="ts" setup> import Driver from '@/components/driver/index.vue' const steps = [ { element: "#first-ele", popover: { title: "這是本站首頁", description: "本站首頁是一些展示性的信息", position: "bottom", }, }, { element: "#second-intro", popover: { title: "這是幫助", description: "點(diǎn)此處可獲取一些本站的相關(guān)說明", position: "top", }, }, { element: "#third-des", popover: { title: "聯(lián)系我們", description: "點(diǎn)擊這里可獲取我們的相關(guān)信息", position: "right", }, }, ]; </script> <style lang="scss" scoped> </style>
因?yàn)轫?xiàng)目中使用時(shí)沒有其他的要求 夠用就行,后期如果有其他的要求可以再修改,嘿嘿
到此這篇關(guān)于vue3項(xiàng)目新用戶引導(dǎo)組件(driver.js)的文章就介紹到這了,更多相關(guān)vue3 driver.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)
當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候,懶加載可以分割代碼塊,提高頁面的初始加載效率解決白屏問題,下面是幾種常見vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧2023-11-11vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果(內(nèi)容可自定義)示例
這篇文章主要介紹了vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)內(nèi)容可自定義的tab點(diǎn)擊切換功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02vue計(jì)算屬性想要傳入?yún)?shù)如何解決
這篇文章主要介紹了vue計(jì)算屬性想要傳入?yún)?shù)如何解決問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01