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

Driver.js前端引導(dǎo)頁(yè)組件的具體使用

 更新時(shí)間:2022年02月10日 10:10:54   作者:一枚小辣雞  
Driver.js是一個(gè)引導(dǎo)插件,本文主要介紹了Driver.js前端引導(dǎo)頁(yè)組件的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

一、介紹

Driver.js
Powerful, highly customizable vanilla JavaScript engine to drive the user’s focus across the page
No external dependencies, supports all major browsers and highly customizable

Driver.js 是一個(gè)輕量級(jí)(~ 4kb gzip),無(wú)需依賴但功能強(qiáng)大的原生 JavaScript 。兼容所有主流瀏覽器,可幫助你將用戶的注意力集中在頁(yè)面上。即它是一個(gè)引導(dǎo)插件。

特色功能:

  • 突出顯示頁(yè)面上的任何任何項(xiàng)目
  • 鎖定用戶交互
  • 創(chuàng)建功能介紹
  • 為用戶添加聚焦器
  • 高度可定制 – 可在任何地方使用,可覆蓋
  • 界面友好 – 可通過(guò)按鍵控制
  • 輕量級(jí) – gzip 壓縮后只有約4kb
  • 在所有主流瀏覽器中保持一致的行為
  • 免費(fèi)用于個(gè)人和商業(yè)用途

二、官方地址

github:https://github.com/kamranahmedse/driver.js

用法和用例介紹:https://kamranahmed.info/driver.js/

簡(jiǎn)單的安裝使用介紹(中文,非官方):http://f2ex.cn/driver-js/

三、使用方法

兩種方式:
一種npm install:

npm install driver.js

另一種鏈接引用

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet"  rel="external nofollow" >

老樣子,感覺(jué)我已經(jīng)化身插件大師了,當(dāng)然是選擇npm…還是vue項(xiàng)目中使用。先在外創(chuàng)建一個(gè)driver.js的配置,寫入下面內(nèi)容,然后在入口引用(這里是main.js為入口)。

import Vue from 'vue';
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

Vue.prototype.$driver = new Driver({
    allowClose: false, //禁止點(diǎn)擊外部關(guān)閉
    doneBtnText: '完成', // 完成按鈕標(biāo)題
    closeBtnText: '關(guān)閉', // 關(guān)閉按鈕標(biāo)題
    stageBackground: '#fff', // 引導(dǎo)對(duì)話的背景色
    nextBtnText: '下一步', // 下一步按鈕標(biāo)題
    prevBtnText: '上一步', // 上一步按鈕標(biāo)題
})

一般使用都是給要引導(dǎo)的頁(yè)面創(chuàng)建相應(yīng)的數(shù)組對(duì)象導(dǎo)出使用。例如創(chuàng)建一個(gè)guide.js

export default [
    {
	 	element: '#demo1',
      	popover: {
        	title: '演示標(biāo)題1',
        	description: '這是詳細(xì)描述\n',
        	position: 'bottom-center'
      	}
    }
]

然后在相應(yīng)的頁(yè)面引用,例如,在home.vue中引用

<template>
    <div id="demo1">演示1</div>
</template>

<script>
import guide from '../guide/guide'

export default {
    name: 'Home',
    mounted() {
        this.$driver.defineSteps(guide);
        this.$driver.start();
    },
}
</script>

四、效果演示

在這里插入圖片描述

五、使用感受

driver提供了較為不錯(cuò)的引導(dǎo)界面,通過(guò)數(shù)組對(duì)象的方式寫好引導(dǎo)相關(guān)配置,提供了較為豐富的接口,可以修改按鈕標(biāo)題、引導(dǎo)頁(yè)背景色、事件回調(diào)等。但是美中的是好像引導(dǎo)也沒(méi)有提供修改樣式的接口?獲取是我沒(méi)找的原因…?

到此這篇關(guān)于Driver.js前端引導(dǎo)頁(yè)組件的具體使用的文章就介紹到這了,更多相關(guān)Driver.js引導(dǎo)頁(yè)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Openlayers實(shí)現(xiàn)長(zhǎng)度測(cè)量的方法

    Openlayers實(shí)現(xiàn)長(zhǎng)度測(cè)量的方法

    在Openlayers中,使用ol/sphere模塊的getDistance函數(shù)可以計(jì)算兩點(diǎn)間的大圓距離,繪制線路時(shí),通過(guò)監(jiān)聽(tīng)繪制事件和幾何對(duì)象的變化,可實(shí)時(shí)更新距離,同時(shí)getLength函數(shù)幫助獲取整條線路的長(zhǎng)度,這些功能主要用于地理信息系統(tǒng)中的距離測(cè)量和地圖制作
    2024-11-11
  • JS驗(yàn)證日期的格式Y(jié)YYY-mm-dd 具體實(shí)現(xiàn)

    JS驗(yàn)證日期的格式Y(jié)YYY-mm-dd 具體實(shí)現(xiàn)

    這篇文章介紹了JS對(duì)日期格式的驗(yàn)證實(shí)例,有需要的朋友可以參考一下
    2013-06-06
  • js中函數(shù)聲明與函數(shù)表達(dá)式

    js中函數(shù)聲明與函數(shù)表達(dá)式

    js的解析器對(duì)函數(shù)聲明與函數(shù)表達(dá)式并不是一視同仁地對(duì)待的。對(duì)于函數(shù)聲明,js解析器會(huì)優(yōu)先讀取,確保在所有代碼執(zhí)行之前聲明已經(jīng)被解析,而函數(shù)表達(dá)式,如同定義其它基本類型的變量一樣,只在執(zhí)行到某一句時(shí)也會(huì)對(duì)其進(jìn)行解析,
    2015-06-06
  • Openlayers實(shí)現(xiàn)根據(jù)半徑繪制圓形

    Openlayers實(shí)現(xiàn)根據(jù)半徑繪制圓形

    這篇文章主要介紹了利用Openlayers實(shí)現(xiàn)繪制三個(gè)圓形,繪制完成之后,三個(gè)圓心連接起來(lái),然后標(biāo)記出每?jī)蓚€(gè)圓心之間的距離,感興趣的可以了解一下
    2022-08-08
  • JS解決回調(diào)地獄為什么需要Promise來(lái)優(yōu)化異步編程

    JS解決回調(diào)地獄為什么需要Promise來(lái)優(yōu)化異步編程

    這篇文章主要為大家介紹了JS解決回調(diào)地獄為什么需要Promise來(lái)優(yōu)化異步編程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • 微信小程序?qū)悠吲T拼鎯?chǔ)的方法

    微信小程序?qū)悠吲T拼鎯?chǔ)的方法

    本篇文章主要介紹了小程序?qū)悠吲T拼鎯?chǔ)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • css把超出的部分顯示為省略號(hào)的方法兼容火狐

    css把超出的部分顯示為省略號(hào)的方法兼容火狐

    兼容火狐c(diǎn)ss控制超出部分用省略號(hào)代替
    2008-07-07
  • 使用 JavaScript如何獲取當(dāng)月的第一天和最后一天

    使用 JavaScript如何獲取當(dāng)月的第一天和最后一天

    這篇文章主要介紹了使用 JavaScript如何獲取當(dāng)月的第一天和最后一天,通過(guò)本文學(xué)習(xí)了如何使用 JavaScript 中的Date.getFullYear()和?Date.getMonth()方法獲得某個(gè)特定月份的第一天和最后一天,需要的朋友可以參考下
    2023-05-05
  • JS實(shí)現(xiàn)右側(cè)懸浮框效果

    JS實(shí)現(xiàn)右側(cè)懸浮框效果

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)右側(cè)懸浮框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • javascript實(shí)現(xiàn)數(shù)字配對(duì)游戲的實(shí)例講解

    javascript實(shí)現(xiàn)數(shù)字配對(duì)游戲的實(shí)例講解

    下面小編就為大家分享一篇javascript實(shí)現(xiàn)數(shù)字配對(duì)游戲的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12

最新評(píng)論