欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3項(xiàng)目新用戶引導(dǎo)組件driver.js示例詳解

 更新時(shí)間:2022年08月24日 15:34:11   作者:行者-龍  
好用的用戶引導(dǎo)插件有?intro.js?和?driver.js?兩個(gè),對(duì)比了一下,最終還是使用了driver.js,這篇文章主要介紹了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中配置使用process.env詳解

    Vue中配置使用process.env詳解

    process.env?是?Node.js?中的一個(gè)環(huán)境對(duì)象,其中保存著系統(tǒng)的環(huán)境的變量信息,可使用?Node.js?命令行工具直接進(jìn)行查看,這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下
    2023-03-03
  • 解決vue-pdf查看pdf文件及打印亂碼的問題

    解決vue-pdf查看pdf文件及打印亂碼的問題

    這篇文章主要介紹了解決vue-pdf查看pdf文件及打印亂碼的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue 中的keep-alive實(shí)例代碼

    vue 中的keep-alive實(shí)例代碼

    這篇文章主要介紹了vue中的keep-alive實(shí)例代碼,vue實(shí)現(xiàn)組件信息緩存的方法,在文中也給大家提到,需要的朋友可以參考下
    2018-07-07
  • Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)

    Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)

    當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候,懶加載可以分割代碼塊,提高頁面的初始加載效率解決白屏問題,下面是幾種常見vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧
    2023-11-11
  • Vue前端框架搭建過程

    Vue前端框架搭建過程

    這篇文章主要介紹了Vue前端框架搭建過程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果(內(nèi)容可自定義)示例

    vue2.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-02
  • vue實(shí)現(xiàn)重置表單信息為空的方法

    vue實(shí)現(xiàn)重置表單信息為空的方法

    今天小編就為大家分享一篇vue實(shí)現(xiàn)重置表單信息為空的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue.js基礎(chǔ)知識(shí)匯總

    Vue.js基礎(chǔ)知識(shí)匯總

    Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來。Vue.js和其他庫相比是一個(gè)小而美的庫,作者的主要目的是通過一個(gè)盡量簡單的 API 產(chǎn)生可反映的數(shù)據(jù)綁定和可組合的視圖組件,感覺作者的思路非常清晰。
    2016-04-04
  • 淺談vue項(xiàng)目,訪問路徑#號(hào)的問題

    淺談vue項(xiàng)目,訪問路徑#號(hào)的問題

    這篇文章主要介紹了淺談vue項(xiàng)目,訪問路徑#號(hào)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue計(jì)算屬性想要傳入?yún)?shù)如何解決

    vue計(jì)算屬性想要傳入?yún)?shù)如何解決

    這篇文章主要介紹了vue計(jì)算屬性想要傳入?yún)?shù)如何解決問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評(píng)論