vue driver.js頁面分步引導
Driver.js基本用法
<template>
<div class="app-container">
<aside>
{{ $t('guide.description') }}
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
</aside>
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
{{ $t('guide.button') }}
</el-button>
</div>
</template>
<script>
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: 'Guide',
data() {
return {
driver: null
}
},
mounted() {
// this.driver = new Driver({
// doneBtnText: "完成", //結束按鈕的文字
// stageBackground: "#ffffff", 突出顯示元素的背景顏色
// nextBtnText: "下一步", //下一步按鈕的文字
// prevBtnText: "上一步", //上一步按鈕的文字
// closeBtnText: "關閉" //關閉按鈕的文字
// onHighlightStarted:(Element)=> {},//元素即將突出顯示時呼叫
// onHighlighted:(Element)=> {},//元素完全突出顯示時呼叫
// onDeselected:(Element)=> {},//取消選擇元素時呼叫
// onReset:(Element)=> {},//當要清除疊加時呼叫
// onNext:(Element)=> {},//在任何步驟中移動到下一步時呼叫
// onPrevious :( Element)=> {},//在任何步驟中移動到上一步時呼叫
// });
this.driver = new Driver()
},
methods: {
guide() {
this.driver.defineSteps(steps)
this.driver.start()
}
}
}
</script>
const steps = [
{
element: '#hamburger-container',
popover: {
title: 'Hamburger',
description: 'Open && Close sidebar',
position: 'bottom'
}
},
{
element: '#breadcrumb-container',
popover: {
title: 'Breadcrumb',
description: 'Indicate the current page location',
position: 'bottom'
}
},
{
element: '#header-search',
popover: {
title: 'Page Search',
description: 'Page search, quick navigation',
position: 'left'
}
},
{
element: '#screenfull',
popover: {
title: 'Screenfull',
description: 'Set the page into fullscreen',
position: 'left'
}
},
{
element: '#size-select',
popover: {
title: 'Switch Size',
description: 'Switch the system size',
position: 'left'
}
},
{
element: '#tags-view-container',
popover: {
title: 'Tags view',
description: 'The history of the page you visited',
position: 'bottom'
},
padding: 0
}
]
export default steps
相關文章
- vue 中使用driver.js來進行頁面分步引導VueJS
- 在vue專案中 使用driver.js來進行頁面分步引導VueJS
- 在Vue專案中使用driver.js(頁面分佈引導)外掛VueJS
- Driver.js 引導JS
- Vue 小案例 導航路由跳轉頁面Vue路由
- 推薦15款最佳的 jQuery 分步引導外掛jQuery
- react頁面引導元件, 支援語音播報React元件
- iOS引導頁iOS
- Vue3學習(十九) - 使用Vue完成頁面引數傳遞Vue
- Vue router 使用 History 模式導致頁面請求 404Vue模式
- vue中共用一個頁面只是路由引數的變化的單頁面重新渲染Vue路由
- VUE 單頁面應用 修改頁面titleVue
- vue頁面跳轉Vue
- router-view子頁面呼叫父頁面方法更新父頁面引數View
- mui 子頁面切換父頁面底部導航UI
- Android 頁面跳轉傳遞引數及頁面返回接收引數Android
- iOS新特性引導頁iOS
- 脈脈App引導頁面中推薦功能的實現推測APP
- iOS引導頁的編寫iOS
- Vue 頁面掉東西元件Vue元件
- vue頁面渲染是閃爍{{}}Vue
- vue頁面表格元件高度控制Vue元件
- vue 3 頁面全屏顯示Vue
- vue跨頁面呼叫函式Vue函式
- vue頁面有彈層,禁止頁面滾動Vue
- 好看的404頁面html帶導航 好看的404頁面htmlHTML
- 因事件堵塞導致頁面卡頓事件
- jQuery導航頁面定位詳解jQuery
- Flutter 路由——頁面表及頁面引數繫結的自動生成Flutter路由
- 微信小程式攜帶引數跳轉頁面/獲取頁面棧微信小程式
- 客戶端內嵌Vue頁面客戶端Vue
- vue 監聽頁面滾動事件Vue事件
- vue-cli3.0 多頁面配置Vue
- vue專案多頁面入口配置Vue
- vue繫結使用者頁面Vue
- Vue 頁面骨架屏注入實踐Vue
- Vue頁面骨架屏注入實踐Vue
- 後臺向vue頁面傳值Vue