用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法

更新時(shí)間：2024年04月18日 09:37:19 作者：卡夫卡的小熊貓

Driver.js是一個(gè)強(qiáng)大的、輕量級(jí)、使用原生JavaScript引擎開(kāi)發(fā)的庫(kù),用于在頁(yè)面聚焦用戶的關(guān)注點(diǎn),下面這篇文章主要介紹了用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法,需要的朋友可以參考下

前言

Driver.js 是一個(gè)強(qiáng)大的，輕量級(jí)，使用原生 JavaScript 引擎開(kāi)發(fā)的庫(kù)，用于在頁(yè)面聚焦用戶的關(guān)注點(diǎn)。它支持所有主流瀏覽器，并且可高度自定義。

Driver.js 并不僅僅是一個(gè)指南性質(zhì)的庫(kù)，其用戶場(chǎng)景非常廣泛，能夠用于任何需要為頁(yè)面構(gòu)建浮層的情況，譬如當(dāng)用戶需要與某些元素交互而隱藏其他元素的場(chǎng)景。

特點(diǎn)：

簡(jiǎn)單:使用簡(jiǎn)單，完全沒(méi)有外部依賴
輕量級(jí):與其他庫(kù)的壓縮量+12kb相比，壓縮量?jī)H為5kb
高度可定制:擁有強(qiáng)大的API，可以隨心所欲地使用
突出顯示任何內(nèi)容:突出顯示頁(yè)面上的任何(字面上的任何)元素
功能介紹:為您的web應(yīng)用程序創(chuàng)建強(qiáng)大的功能介紹
焦點(diǎn)移位器:為用戶添加焦點(diǎn)移位器
用戶友好:一切都是由鍵盤(pán)控制
TypeScript:用TypeScript編寫(xiě)
一致的行為:適用于所有瀏覽器
MIT授權(quán):個(gè)人免費(fèi)

安裝

npm install driver.js

<link rel="stylesheet" href="/dist/driver.min.css" rel="external nofollow" >
<script src="/dist/driver.min.js"></script>

示例

基本使用

引入 driverjs：

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

創(chuàng)建實(shí)例

const driverObj = driver({
    showProgress: true,
    steps: cls,
    showButtons: ["next"],
    popoverClass: "driverjs-theme",
    showProgress: false,
    popoverOffset: 50,
    doneBtnText: "知道了",
    nextBtnText: "知道了",
  });

實(shí)例屬性介紹：

className：className用來(lái)包裝driver.js彈出窗口
animate：動(dòng)畫(huà)時(shí)改變突出顯示的元素
opacity：背景不透明度(0表示只有彈出窗口，沒(méi)有覆蓋)
padding：元素到周?chē)吘壍木嚯x
popoverOffset：彈窗與元素偏移距離
allowClose：點(diǎn)擊覆蓋是否應(yīng)該關(guān)閉
showProgress：是否顯示彈窗進(jìn)度
overlayClickNext：它應(yīng)該移動(dòng)到下一步疊加點(diǎn)擊
doneBtnText：最后一個(gè)按鈕上的文本
closeBtnText：此步驟的關(guān)閉按鈕上的文本
nextBtnText：此步驟的下一個(gè)按鈕文本
prevBtnText：此步驟的上一個(gè)按鈕文本
showButtons：在頁(yè)腳不顯示控制按鈕
keyboardControl：允許通過(guò)鍵盤(pán)控制(escape鍵關(guān)閉，箭頭鍵移動(dòng))
scrollIntoViewOptions：我們?cè)诳赡艿那闆r下使用' scrollIntoView() '，如果你想要的話，在這里傳遞它的選項(xiàng)
showButtons：顯示按鈕合集（previous， next， close）
onHighlightStarted：當(dāng)元素即將突出顯示時(shí)調(diào)用
onHighlighted：當(dāng)元素完全高亮顯示時(shí)調(diào)用
onDeselected：當(dāng)元素被取消選中時(shí)調(diào)用
onReset：當(dāng)覆蓋即將被清除時(shí)調(diào)用
onNext：在任何步驟移動(dòng)到下一步時(shí)調(diào)用
onPrevious：在任何步驟移動(dòng)到上一步時(shí)調(diào)用

注意，您在驅(qū)動(dòng)程序（step屬性）定義中提供的所有按鈕選項(xiàng)都可以通過(guò)在步驟定義中提供它們來(lái)覆蓋特定步驟

step 屬性：

const stepDefinition = {
  element: '#some-item',       
  popover: {                    
    className: 'popover-class',
    title: 'Title',             
    description: 'Description', 
    showButtons: false,         
    closeBtnText: 'Close',      
    nextBtnText: 'Next',       
    prevBtnText: 'Previous',  
    popoverClass: "driverjs-theme",
  }
};

element：要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
popover

- className：className來(lái)包裝這個(gè)特定的步驟彈出窗口，除了驅(qū)動(dòng)程序選項(xiàng)中的一般className
- title：彈出窗口上的標(biāo)題
- description：彈出窗口上的描述信息
- showButtons：在頁(yè)腳不顯示控制按鈕
- closeBtnText：此步驟的關(guān)閉按鈕上的文本
- nextBtnText：此步驟的下一個(gè)按鈕文本
- prevBtnText：此步驟的上一個(gè)按鈕文本
- popoverClass：彈窗的自定義樣式名

API 方法

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; 
driver.moveNext();     
driver.movePrevious(); 
driver.start(stepNumber = 0);  
driver.highlight(string|stepDefinition); 
driver.reset(); 
driver.hasHighlightedElement(); 
driver.hasNextStep(); 
driver.hasPreviousStep(); 
driver.preventMove();

const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); 
activeElement.hidePopover();  
activeElement.showPopover();  

activeElement.getNode();

isActivated：檢查驅(qū)動(dòng)程序是否激活
moveNext：移動(dòng)到步驟列表中的下一步
movePrevious：移動(dòng)到步驟列表中的上一步
start：開(kāi)始執(zhí)行定義的步驟
highlight：使用查詢選擇器或步驟定義突出顯示元素
reset：重置覆蓋并清除屏幕
hasHighlightedElement：檢查是否有突出顯示的元素
hasNextStep：檢查是否有下一步要進(jìn)行
hasPreviousStep：檢查是否有上一步要移動(dòng)
preventMove：阻止當(dāng)前移動(dòng)。有用的' onNext '或' onPrevious '，如果你想；執(zhí)行一些異步任務(wù)并手動(dòng)移動(dòng)到下一步
getCalculatedPosition：獲取屏幕上當(dāng)前突出顯示的元素
getCalculatedPosition：獲取活動(dòng)元素的屏幕坐標(biāo)
hidePopover：隱藏彈出窗口
showPopover：顯示彈出窗口
getNode：獲取該元素背后的DOM元素

highlight

突出顯示單個(gè)元素：

只需傳遞選擇器即可突出顯示單個(gè)元素。

const driver = new Driver();
driver.highlight('#create-post');

一個(gè)實(shí)際的例子是：使用它來(lái)調(diào)暗背景并突出顯示所需的元素。

突出顯示和彈出框：

可以使用彈出窗口在突出顯示的元素旁邊顯示其他詳細(xì)信息

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

定位彈出框：

默認(rèn)情況下，driver.js 會(huì)自動(dòng)找到合適的彈出位置并顯示它。也可以使用 position 屬性來(lái)覆蓋它。

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'left', // 可以使用 `top`, `left`, `right`, `bottom`
  }
});

方法導(dǎo)出：

export function dri(cls, type) {
  // cls dialog節(jié)點(diǎn)class, 如果沒(méi)有dialog 傳個(gè)undefined
  // type  driver步驟,
  // 開(kāi)啟 這里用不用定時(shí)器自己測(cè)試,看看去掉之后管不管用
  setTimeout(() => {
    driv(cls, type);
  }, 300);
}

function driv(cls, type) {
  cls.map((item) => {
    item.popover.side = item.popover.side ? item.popover.side : "bottom";
    return item;
  });
  const driverObj = driver({
    showProgress: true,
    steps: cls,
    showButtons: ["next"],
    popoverClass: "driverjs-theme",
    showProgress: false,
    popoverOffset: 50,
    doneBtnText: "知道了",
    nextBtnText: "知道了",
  });

  driverObj.drive();
}

使用：

dri([
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `test`,
        },
      },
      {
        element: ".top-first",
        popover: {
          description: "測(cè)試2",
        },
      },
    ]);

彈窗樣式修改

這里介紹三種修改樣式的方式：

通過(guò)屬性 popoverClass 來(lái)自定義屬性
直接修改插件中的樣式
在 description 屬性中使用模版字符串編寫(xiě) html

popoverClass

在 step 數(shù)據(jù) list 列表的屬性中添加 popoverClass 屬性，來(lái)自定義屬性

const driver = [
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `test`,
        },
      },
    ]
dri(driver)

.driver-popover .driverjs-theme {
  background-color: #fde047;
  color: #000;
}
.driver-popover .driverjs-theme .driver-popover-title {
    display: none; 
  }

樣式修改

新手引導(dǎo)元素是建立在body下面，所以樣式不能寫(xiě)在當(dāng)前vue文件中的scoped中

<style lang="less">
div#driver-popover-item{  // 最外面樣式
  border-radius: 0;
  padding: 0;
  // width: 260px;
  // height: 160px;
  div.driver-popover-title {
    display: none; // 隱藏標(biāo)題
  }
  div.driver-popover-footer{
    display: flex!important;
    justify-content: center;
    margin-bottom: 20px;
    button.driver-close-btn {
      display: none; // 隱藏關(guān)閉按鈕
    }
    .driver-btn-group{
      display: flex;
      justify-content: center;
      button.driver-prev-btn{
      display: none !important; // 隱藏上一步按鈕
      }
      button.driver-next-btn {
        width: 74px;
        height: 34px;
        background: #345eef;
        color: #fff;
        text-shadow: none;
      }
    }
  }
  .driver-popover-description{ // 內(nèi)容樣式設(shè)置
    font-size: 14px;
    margin: 50px auto 29px;
    .step_two {
      display: flex;
      align-items: center;
      justify-content: center;
      .step_first{
        width: 20px;
        height: 20px;
        background: #345eef;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        margin-right: 5px;
        text-align: center;
      }
    }
  }
}
</style>

借助 description 屬性

可以在 step 步驟 list 得屬性 description 使用模板字符串中編寫(xiě)描述內(nèi)容的樣式，該方法僅限于描述內(nèi)容中的樣式修改，前兩個(gè)方法適用于整個(gè)彈窗的樣式修改。

const driver = [
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `
            <div style='color: red'>222</div>
            <div style='color: red;font-size:0.36rem'>222</div>
            <div style='width:100%; height:0.01rem; background: #4d7ee4'></div>
          `,
        },
      }
]

dri(driver)

總結(jié)

到此這篇關(guān)于用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法的文章就介紹到這了,更多相關(guān)用戶引導(dǎo)插件driverjs使用及彈窗樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: