vue-js-driver v1.0.5

vue-js-driver

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

✨ 特性

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

🎬 在线体验

Live Demo

📦 安装

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

👉 快速上手

引入

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

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

Vue.use(vueJsDriver, driverConfig);

配置Driver

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

配置步骤

// 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: [], // 其他页面步骤
  ...
}

使用

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1 id="welcome">{{ msg }}</h1>
    <p class="description">
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3 @click="showDriver">显示引导Show Demo</h3>
    <h3 @click="highSingleElement">突出单个元素</h3>
    <h3 @click="highSingleElement2">突出单个元素（含配置）</h3>
  </div>
</template>

<script>
import steps from '../steps.js';

export default {
  props: {
    msg: String
  },
  methods: {
    showDriver () {

      // 通过$vueJsDriver来调用，1代表跳转到第二步，不传默认跳转至第一步
      this.$vueJsDriver.showDriver(steps.homeSteps, 1);
    },
    highSingleElement () {
      this.$sfDriverJs.highlight('#welcome');
    },
    highSingleElement2 () {
      this.$sfDriverJs.highlight({
        element: '#welcome',
        popover: {
          title: 'Title for the Popover',
          description: 'Description for it',
          position: 'bottom',
          offset: 20
        }
      });
    }
  },
  ...
}

API

Driver选项

Step步骤选项

方法

您可以使用各种选项来实现您可能想要的任何选择

🔑 License

MIT