Web页面用户分步操作引导插件driver.js

driver.js是一个网页端的用户操作分步引导操作，可以在整个页面上引导用户操作，用这种方式来引导用户在进入页面后的操作，以便于用户更快的熟悉系统功能！

Github

安装

npm install driver.js

使用

在main.ts里引入并绑定

import {
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

const app = createApp(App)

// 绑定
app.config.globalProperties.$driver = new Driver({
    
  doneBtnText: '完成', // Text on the final button
  closeBtnText: '关闭', // Text on the close button for this step
  stageBackground: '#fff', // Background color for the staged behind highlighted element
  nextBtnText: '下一步', // Next button text for this step
  prevBtnText: '上一步', // Previous button text for this step
})

app.use(store)
app.use(router)
app.mount('#app')

配置引导节点（新建文件driver.ts）

export default [
  {
    
    element: '#userInfo',
    popover: {
    
      title: '用户信息',
      description: '显示用户名,退出,全屏操作,换肤操作',
      position: 'left',
    }
  },
  {
    
    element: '#grid',
    popover: {
    
      title: '收缩，面包屑',
      description: '点击开关导航栏，面包屑展示',
      position: 'right',
    }
  },
  {
    
    element: '#tagGroup',
    popover: {
    
      title: 'tag标签',
      description: '记录打开页面',
      position: 'bottom',
    }
  },
  {
    
    element: '#mainInfo',
    popover: {
    
      title: '内容区',
      description: '显示页面内容',
      position: 'left',
    }
  },
  {
    
    element: '#nav',
    popover: {
    
      title: '导航区',
      description: '导航功能展示',
      position: 'right',
    }
  },
]

需要引导的页面中导入节点配置文件

<script lang="ts">
import {
     Options, Vue } from "vue-class-component";
import driverStep from "@/utils/driver";

@Options({
    
  components: {
    },
  mounted() {
    
    this.$driver.defineSteps(driverStep);
    this.$driver.start();
  },
})
export default class HomeView extends Vue {
    }
</script>

driver.ts里的id页面上都要有，json数据的顺序就是引导的顺序