vue-js-driver

!npm
!GitHub top language
!GitHub file size in bytes
!NPM

> 基于driver.js封装的vue2版轻量级新手引导库

✨ 特性

- 🚀 简单轻量
- 💪 高度可定制
- ✋ 阻止用户交互
- ⌨️ 支持键盘控制
- 👏 突出显示任何内容
- 🆓 开源版本支持免费商用
- 🌀 所有主流浏览器表现一致

🎬 在线体验

Live Demo

!demo.gif

📦 安装

`` bash
npm install vue-js-driver
yarn add vue-js-driver
pnpm add vue-js-driver
`

👉 快速上手

$3

` js
// main.js全局引入 或 HelloWorld.vue组件内引入
import Vue from 'vue';

import vueJsDriver from 'vue-js-driver';
import driverConfig from '@/config/driverConfig.js';

Vue.use(vueJsDriver, driverConfig);
`

$3

`js
// driverConfig.js
export default {
className: '', // 包裹Driver弹窗的类名，避免css作用域污染
allowClose: false, // 是否允许点击遮罩时关闭
opacity: 0, // 背景透明度，0 表示只弹窗无遮罩
padding: 0, // 元素与边缘的距离
stageBackground: 'transparent', // 高亮元素的背景颜色
prevBtnText: '上一步->', // 当前步骤上一步按钮的文本
nextBtnText: '下一步->', // 当前步骤下一步按钮的文本
closeBtnText: '关闭x', // 当前步骤关闭按钮的文本
doneBtnText: '完成√', // 最后一个按钮的文本
showButtons: false // 是否显示底部的控制按钮
...
}
`

$3

`js
// steps.js
export default {
homeSteps: [ // 首页步骤
{
element: '#welcome', // 高亮的元素，内部通过querySelector获取元素，还可通过DOM的方法获取，例如document.getElementById('welcome')
popover: {
title: '这是标题', // 弹窗的标题，为空则不显示，注：支持HTML
description: '这是描述', // 弹窗的主体内容，注：支持HTML
position: 'right', // 弹窗显示的位置
},
padding: 25 // 弹窗与高亮元素的内边距，会扩大高亮元素的宽/高
...
// 更多配置：https://github.com/kamranahmedse/driver.js/blob/master/src/index.js
}
],
otherSteps: [], // 其他页面步骤
...
}
`

$3

`vue