Vue使用driver.js做引導頁
輕量級、無依賴的原生 JavaScript 引擎,可將用戶的注意力集中在整個頁面上;這是一個功能強大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導庫。
簡介及使用教程
Driver.js
是一個功能強大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導庫。它沒有依賴項,支持所有主要瀏覽器。
特點:
- 簡單:簡單易用,完全沒有外部依賴
- 高度可定制:有一個強大的api,可以用于你希望突出顯示任何內容
- 高亮顯示:頁面功能介紹上的任意元素(字面上的任意)
- 功能介紹:為你的web應用程序創(chuàng)建強大的功能介紹
- 焦點移位器:為用戶友好添加焦點移位器
- 用戶友好:通過鍵盤行為控制一切
- 一致行為:所有瀏覽器(包括著名的IE)都可以使用
- MIT聲明:免費用于個人和商業(yè)用途。
安裝
Npm
npm i driver.js
Yarn
yarn add driver.js
瀏覽器
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script> <link rel="stylesheet" > <!-- 或者 --> <link rel="stylesheet" href="/dist/driver.min.css"> <script src="/dist/driver.min.js"></script>
使用
引入
import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css';
簡單示例
const driver = new Driver(); driver.highlight('#create-post');
交互時高亮元素
const focusDriver = new Driver(); // Highlight the section on focus document.getElementById('creation-input') .addEventListener('focus', (e) => { focusDriver.focus('#creation-input'); });
帶彈窗
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', } });
彈窗支持定義位置、HTML內容等
創(chuàng)建功能介紹
const driver = new Driver(); // Define the steps for introduction driver.defineSteps([ { element: '#first-element-introduction', popover: { className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // Start the introduction driver.start();
彈出框定位
您還可以將彈出框的位置更改為
left, left-center, left-bottom, top, top-center, top-right, right, right-center,right-bottom
或bottom, bottom-center, bottom-right, mid-center
。
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', // position can be left, left-center, left-bottom, top, // top-center, top-right, right, right-center, right-bottom, // bottom, bottom-center, bottom-right, mid-center position: 'left', } });
如果不指定位置或者指定為 be auto,它會自動為popover找到合適的位置并顯示出來
選項
Driver 選項
const driver = new Driver({ className: 'scoped-class', //包裹driver.js彈窗的類名 className to wrap driver.js popover animate: true, // 高亮元素改變時是否顯示動畫 Animate while changing highlighted element opacity: 0.75, //背景透明度(0 表示只有彈窗并且沒有遮罩) Background opacity (0 means only popovers and without overlay) padding: 10, // 元素與邊緣的距離 Distance of element from around the edges allowClose: true, // 是否允許點擊遮罩時關閉 Whether clicking on overlay should close or not overlayClickNext: false, //是否允許點擊遮罩時移到到下一步 Should it move to next step on overlay click doneBtnText: 'Done', // 最終按鈕上的文本 Text on the final button closeBtnText: 'Close', // 當前步驟關閉按鈕上的文本 Text on the close button for this step nextBtnText: 'Next', //當前步驟下一步按鈕上的文本 Next button text for this step prevBtnText: 'Previous', // 當前步驟上一步按鈕上的文本 Previous button text for this step showButtons: false, //是否在底部顯示控制按鈕 Do not show control buttons in footer keyboardControl: true, // 是否允許通告鍵盤控制(escape關閉,箭頭鍵用于移動)Allow controlling through keyboard (escape to close, arrow keys to move) scrollIntoViewOptions: {}, // `scrollIntoView()` 方法的選項 We use `scrollIntoView()` when possible, pass here the options for it if you want any onHighlightStarted: (Element) {}, // 元素開將要高亮時調用Called when element is about to be highlighted onHighlighted: (Element) {}, // 元素開完全高亮時調用Called when element is fully highlighted onDeselected: (Element) {}, // 取消選擇時調用 Called when element has been deselected onReset: (Element) {}, // 遮罩將要關閉時調用 Called when overlay is about to be cleared onNext: (Element) => {}, // 任何步驟中移到到下一步時調用Called when moving to next step on any step onPrevious: (Element) => {}, // 任何步驟中移到到上一步時調用Called when moving to next step on any step });
step 選項
const stepDefinition = { element : '#some-item' , // 查詢要突出顯示的選擇器字符串或節(jié)點 stageBackground : '#ffffff' , // 這將覆蓋驅動程序中設置的 popover : { // 不會有 popover如果為空或未給定 className : 'popover-class' , // 除了驅動程序選項中的一般 className 之外,還要包裝此特定步驟 popover 的 className title : 'Title' , // 彈出框上的標題 description : 'Description' , // 彈出框的主體 showButtons : false , // 不要在頁腳中顯示控制按鈕 doneBtnText : 'Done' , // 最后一個按鈕上的文本 closeBtnText : 'Close' , // 關閉按鈕上的文本 nextBtnText : 'Next' , // 下一個按鈕文本 prevBtnText : 'Previous' , // 上一個按鈕文本 } , onNext : ( ) => { } , // 從當前步驟移動到下一步時調用 onPrevious :( ) => { } , // 從當前步驟移動到上一步時調用 } ;
API方法
const driver = new Driver(driverOptions); const isActivated = driver.isActivated; // 檢查driver是否激活Checks if the driver is active or not driver.moveNext(); // 移動到步驟列表中的下一步 Moves to next step in the steps list driver.movePrevious(); // 移動到步驟列表中的上一步 Moves to previous step in the steps list driver.start(stepNumber = 0); // 從指定的步驟開始 Starts driving through the defined steps driver.highlight(string|stepDefinition); // 高亮通過查詢選擇器指定的或步驟定義的元素 highlights the element using query selector or the step definition driver.reset(); // 重置遮罩并且清屏Resets the overlay and clears the screen driver.hasHighlightedElement(); //檢查是否有高亮元素 Checks if there is any highlighted element driver.hasNextStep(); // 檢查是否有可移動到的下一步元素 Checks if there is next step to move to driver.hasPreviousStep(); // 檢查是否有可移動到的上一步元素。Checks if there is previous step to move to driver.preventMove();// 阻止當前移動。如果要執(zhí)行某些異步任務并手動移動到下一步,則在“onNext”或“onPrevious”中很有用 Prevents the current move. Useful in `onNext` or `onPrevious` if you want to // perform some asynchronous task and manually move to next step const activeElement = driver.getHighlightedElement();// 獲取屏幕上當前高亮元素 Gets the currently highlighted element on screen const lastActiveElement = driver.getLastHighlightedElement(); activeElement.getCalculatedPosition(); // 獲取活動元素的屏幕坐標Gets screen co-ordinates of the active element activeElement.hidePopover(); // 隱藏彈窗Hide the popover activeElement.showPopover(); // 顯示彈窗Show the popover activeElement.getNode(); // 獲取此元素后面的DOM元素Gets the DOM Element behind this element 你可以使用各種各樣的選項來實現(xiàn)你想要的一切。You can use a variety of options to achieve whatever you may want.
引導頁效果
Driver.js -Demo 是一個指南性質的庫
訪問GitHub
通用引導頁
新建主頁面文件
layout
<template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <sidebar class="sidebar-container" /> <div :class="{hasTagsView:needTagsView}" class="main-container"> <div :class="{'fixed-header':fixedHeader}"> <navbar /> <tags-view v-if="needTagsView" /> </div> <app-main /> <right-panel v-if="showSettings"> <settings /> </right-panel> </div> </div> </template> <script> import RightPanel from '@/components/RightPanel' import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' import ResizeMixin from './mixin/ResizeHandler' import { mapState } from 'vuex' import Driver from 'driver.js' // import driver.js import 'driver.js/dist/driver.min.css' // import driver.js css import steps from './steps' export default { name: 'Layout', components: { AppMain, Navbar, RightPanel, Settings, Sidebar, TagsView }, mixins: [ResizeMixin], data() { return { driver: null } }, computed: { ...mapState({ sidebar: state => state.app.sidebar, device: state => state.app.device, showSettings: state => state.settings.showSettings, needTagsView: state => state.settings.tagsView, fixedHeader: state => state.settings.fixedHeader }), classObj() { return { hideSidebar: !this.sidebar.opened, openSidebar: this.sidebar.opened, withoutAnimation: this.sidebar.withoutAnimation, mobile: this.device === 'mobile' } } }, mounted() { this.driver = new Driver({ opacity: 0.1, animate: true, doneBtnText: '我知道了', closeBtnText: '跳過', // 關閉按鈕文案 nextBtnText: '下一步', // 下一步的按鈕文案 prevBtnText: '上一步', // 上一步的按鈕文案 keyboardControl: true // 允許通過鍵盤控制(退出關閉,箭頭鍵移動) }) console.log(this.driver) this.firstLogin() }, methods: { handleClickOutside() { this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) }, // 用戶是否首次登錄 firstLogin() { const firstDate = localStorage.getItem('firstDate') // 獲取當前時間(年月日) const now = new Date().toLocaleDateString() // 轉換成時間戳 const time = Date.parse(new Date(now)) if (localStorage.getItem('firstDate')) { console.log('頁面被刷新') if (time > firstDate) { localStorage.setItem('firstDate', JSON.stringify(time)) } } else { this.guide() localStorage.setItem('firstDate', JSON.stringify(time)) console.log('首次被加載') } }, // 頁面引導 guide() { this.driver.defineSteps(steps) this.driver.start() } } } </script> <style lang="scss" scoped> @import "~@/styles/mixin.scss"; @import "~@/styles/variables.scss"; .app-wrapper { @include clearfix; position: relative; height: 100%; width: 100%; &.mobile.openSidebar { position: fixed; top: 0; } } .drawer-bg { background: #000; opacity: 0.3; width: 100%; top: 0; height: 100%; position: absolute; z-index: 999; } .fixed-header { position: fixed; top: 0; right: 0; z-index: 9; width: calc(100% - #{$sideBarWidth}); transition: width 0.28s; } .hideSidebar .fixed-header { width: calc(100% - 54px) } .mobile .fixed-header { width: 100%; } </style>
新建
steps.js
文件
// 定義介紹的步驟 const steps = [ { element: '#hamburger-container', stageBackground: '#fff', popover: { title: '側邊欄按鈕', description: '打開或者關閉側邊欄', position: 'bottom' } }, { element: '#sidebar-container', popover: { title: '側邊欄', description: '側邊欄及路由', position: 'right-center' } }, { element: '#breadcrumb-container', popover: { title: '面包屑導航', description: '指示當前頁的位置', position: 'bottom' } }, { element: '#header-search', popover: { title: '頁面搜索', description: '頁面搜索,快速導航', position: 'left' } }, { element: '#screenfull', popover: { title: '滿屏', description: '將頁面設置為全屏', position: 'left' } }, { element: '#size-select', popover: { title: '開關的大小', description: '系統(tǒng)切換大小', position: 'left' } }, { element: '#lang-select', popover: { title: '國際化', description: '中英文切換', position: 'left' }, padding: 0 }, { element: '#personal_settings', popover: { title: '個人中心', description: '個人賬號設置及操作', position: 'left' }, padding: 0 }, { element: '#tags-view-container', popover: { title: '標簽視圖', description: '您訪問的頁面的歷史', position: 'bottom-center' }, padding: 0 }, { element: '#theme_settings', popover: { title: '主題設置', description: '設置自己喜歡的主題', position: 'right-center' }, padding: 0 }, { element: '#app_main', stageBackground: '#fff', popover: { className: 'app-container', title: '主體內容區(qū)', // description: '主體內容的一系列操作', position: 'top-center' }, padding: -30 } ] export default steps
到此這篇關于Vue使用driver.js做引導頁的文章就介紹到這了,更多相關Vue driver.js引導頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置
本文主要介紹了vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉路由,路由組件會渲染<router-view></router-view>標簽,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-10-10