Vue 页面引导效果(首次登录新用户引导) driver.js 引导页
轻量级、无依赖的原生 JavaScript 引擎,可将用户的注意力集中在整个页面上;这是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。
简介及使用教程
Driver.js
是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项,支持所有主要浏览器。
特点:
- 简单:简单易用,完全没有外部依赖
- 高度可定制:有一个强大的api,可以用于你希望突出显示任何内容
- 高亮显示:页面功能介绍上的任意元素(字面上的任意)
- 功能介绍:为你的web应用程序创建强大的功能介绍
- 焦点移位器:为用户友好添加焦点移位器
- 用户友好:通过键盘行为控制一切
- 一致行为:所有浏览器(包括著名的IE)都可以使用
- MIT声明:免费用于个人和商业用途。
安装
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" href="https://unpkg.com/driver.js/dist/driver.min.css"><!-- 或者 -->
<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内容等
创建功能介绍
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-centerposition: 'left',}
});
如果不指定位置或者指定为 be auto,它会自动为popover找到合适的位置并显示出来
选项
Driver 选项
const driver = new Driver({className: 'scoped-class', //包裹driver.js弹窗的类名 className to wrap driver.js popoveranimate: true, // 高亮元素改变时是否显示动画 Animate while changing highlighted elementopacity: 0.75, //背景透明度(0 表示只有弹窗并且没有遮罩) Background opacity (0 means only popovers and without overlay)padding: 10, // 元素与边缘的距离 Distance of element from around the edgesallowClose: true, // 是否允许点击遮罩时关闭 Whether clicking on overlay should close or notoverlayClickNext: false, //是否允许点击遮罩时移到到下一步 Should it move to next step on overlay clickdoneBtnText: 'Done', // 最终按钮上的文本 Text on the final buttoncloseBtnText: 'Close', // 当前步骤关闭按钮上的文本 Text on the close button for this stepnextBtnText: 'Next', //当前步骤下一步按钮上的文本 Next button text for this stepprevBtnText: 'Previous', // 当前步骤上一步按钮上的文本 Previous button text for this stepshowButtons: false, //是否在底部显示控制按钮 Do not show control buttons in footerkeyboardControl: 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 anyonHighlightStarted: (Element) {}, // 元素开将要高亮时调用Called when element is about to be highlightedonHighlighted: (Element) {}, // 元素开完全高亮时调用Called when element is fully highlightedonDeselected: (Element) {}, // 取消选择时调用 Called when element has been deselectedonReset: (Element) {}, // 遮罩将要关闭时调用 Called when overlay is about to be clearedonNext: (Element) => {}, // 任何步骤中移到到下一步时调用Called when moving to next step on any steponPrevious: (Element) => {}, // 任何步骤中移到到上一步时调用Called when moving to next step on any step
});
step 选项
const stepDefinition = {element : '#some-item' , // 查询要突出显示的选择器字符串或节点stageBackground : '#ffffff' , // 这将覆盖驱动程序中设置的popover : { // 不会有 popover如果为空或未给定className : 'popover-class' , // 除了驱动程序选项中的一般 className 之外,还要包装此特定步骤 popover 的 classNametitle : '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 todriver.preventMove();// 阻止当前移动。如果要执行某些异步任务并手动移动到下一步,则在“onNext”或“onPrevious”中很有用 Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next stepconst 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 popoveractiveElement.getNode(); // 获取此元素后面的DOM元素Gets the DOM Element behind this element
你可以使用各种各样的选项来实现你想要的一切。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: '系统切换大小',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: '主体内容区',// description: '主体内容的一系列操作',position: 'top-center'},padding: -30}
]export default steps
Vue 页面引导效果(首次登录新用户引导) driver.js 引导页相关推荐
- 从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客 一.主体布局 ...
- vue点击切换类名_vue 新用户引导(vue-dirver)
最近公司经理让我在项目上做一个新用户引导,讲真这玩意我只在APP上看见过,网页上没啥功能啊,还需要引导! 没办法,刚它!!! 在网上查了点资料 Vue 基本上都是 intro.js 和 driver. ...
- Vue - 页面添加水印效果
Vue 页面中使用水印效果 水印效果 使用方法 水印效果 全屏水印 指定容器水印 使用方法 项目中新建一个 watermark.js 文件 let watermark = {};let setWate ...
- linux系统登录新用户,Linux为新员工创建用户以及配置登录公钥
背景 因新入职员工需要为其LInux服务器创建账户以及添加员工同事的主机公钥,以下步骤均以脚本实现 需求1.在Linux系统中创建用户 2.创建用户.ssh存放公钥目录 3.将用户的主机公钥信息加入到 ...
- 政务微信内接H5页面,获取当前登录的用户信息
springboot 2.3.4.RELEASE import java.util.*;/*** @Title: ExpiryMap 可以设置过期时间的Map* @description Expiry ...
- 在 phpMyAdmin 里添加新用户帐号
为了数据库的安全性,尽量不用 root 来连接网站的数据库,以前用 cPanel 面板时,这个不是问题,添加帐号很简单,现在 VPS 不提供任何面板,只能用phpmyadmin 来创建新用户帐号了,这 ...
- 实现登录和用户信息组件的按需展示
在 my.vue 页面中,通过 mapState 辅助函数,导入需要的 token 字符串: import badgeMix from '@/mixins/tabbar-badge.js' // 1. ...
- 手动为linux系统添加新用户——过程详解
linux下添加新用户的背后 一般来讲,添加用户时常使用"useradd "命令,系统即可默认添加用户并设置UID,GID等信息,其实这背后都是可以通过手动修改系统文件实现的. 我 ...
- 物联网应用技术竞赛 ——数据库添加新用户映射
在服务器电脑上的数据库使用 sa 帐号登录,完成新零售门店数据库.智能 市政数据库的添加. 注意:如果这两个数据库未添加成功,会对后续部分任务造成影响. 在服务器电脑上的数据库中创建名为"d ...
最新文章
- Android中LayoutInflater的使用
- 论文推荐:ReLICv2 ,新的自监督学习能否在ResNet 上超越监督学习?
- KEIL ARM 6.12 compiler 编译__ASM 错误的解决方法
- php在线语音,PHP在线语音合成
- GridView 的EmptyDataText 及 EmptyDataTemplate
- Mysql学习总结(56)——MySQL用户管理和权限设置
- asp.net MVC之 自定义过滤器(Filter)
- matlab拉普拉斯算子边缘提取_【图像处理】OpenCV系列十 --- 边缘检测之Laplacian算子...
- linux内核的裁剪与移植
- FME将ArcGIS符号化转为CAD填充
- addEventListener兼容性问题
- WINDOWS XP数字总线补丁 KB888111
- 速看|快速软件开发框架突破信息孤岛,高效实现数字化发展!
- 【processing码绘】简单实现码绘动态图形与拓展
- 【MySQL】经典面试题
- CentOS7配置supervisor开机自启[队列监听,Horizon服务启动]
- php数据库数组json,PHP 从数据库中取出数据并存为Json数据
- Linux音频驱动之五:UDA1341芯片操作接口
- 计算机应用与维修是硬件还是软件,计算机应用与维护基础教程
- Unity插件笔记(一)Odin