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

Vue使用driver.js做引導頁

 更新時間:2022年02月10日 10:02:44   作者:織_網  
Driver.js是一個功能強大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導庫,本文主要介紹了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');

image.png

交互時高亮元素

const focusDriver = new Driver();

// Highlight the section on focus
document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    focusDriver.focus('#creation-input');
  });

image.png

帶彈窗

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

image.png

彈窗支持定義位置、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();

image.png

彈出框定位

您還可以將彈出框的位置更改為left, left-center, left-bottom, top, top-center, top-right, right, right-center,right-bottombottom, 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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vue2?模版指令元素綁定事件執(zhí)行順序解析

    Vue2?模版指令元素綁定事件執(zhí)行順序解析

    這篇文章主要為大家介紹了Vue2?模版指令元素綁定事件執(zhí)行順序解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • Vue組件之高德地圖地址選擇功能的實例代碼

    Vue組件之高德地圖地址選擇功能的實例代碼

    這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • Vue+Koa2 打包后進行線上部署的教程詳解

    Vue+Koa2 打包后進行線上部署的教程詳解

    這篇文章主要介紹了Vue+Koa2 打包后如何進行線上部署,給大家分享了一些問題及解決方法,需要的朋友可以參考下
    2019-07-07
  • vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置

    vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置

    本文主要介紹了vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue3父組件和子組件如何傳值實例詳解

    vue3父組件和子組件如何傳值實例詳解

    近期學習vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關于vue3父組件和子組件如何傳值的相關資料,需要的朋友可以參考下
    2022-08-08
  • vue單文件組件無法獲取$refs的問題

    vue單文件組件無法獲取$refs的問題

    這篇文章主要介紹了vue單文件組件無法獲取$refs的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • vue引入axios同源跨域問題

    vue引入axios同源跨域問題

    這篇文章主要介紹了vue引入axios同源跨域問題,文章給大家提供了解決方案,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • vue綜合組件間的通信詳解

    vue綜合組件間的通信詳解

    這篇文章主要為大家詳細介紹了vue綜合組件間的通信,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • Vue3中10多種組件通訊方法小結

    Vue3中10多種組件通訊方法小結

    本文主要介紹了Vue3中10多種組件通訊方法小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • Vue中router-view和component :is的區(qū)別解析

    Vue中router-view和component :is的區(qū)別解析

    這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉路由,路由組件會渲染<router-view></router-view>標簽,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2023-10-10

最新評論