Web page user step-by-step operation guide plug-in driver js

driver.js It is a step-by-step guide operation for user operation on the web side , Users can be guided to operate on the whole page , Use this method to guide the user to operate after entering the page , So that users can get familiar with the system functions faster ！

Github

install

npm install driver.js

Use

stay main.ts Import and bind in

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

//  introduce 
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

const app = createApp(App)

//  binding 
app.config.globalProperties.$driver = new Driver({
    
  doneBtnText: ' complete ', // Text on the final button
  closeBtnText: ' close ', // Text on the close button for this step
  stageBackground: '#fff', // Background color for the staged behind highlighted element
  nextBtnText: ' next step ', // Next button text for this step
  prevBtnText: ' The previous step ', // Previous button text for this step
})

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

Configure the boot node （ New file driver.ts）

export default [
  {
    
    element: '#userInfo',
    popover: {
    
      title: ' User information ',
      description: ' Display the user name , sign out , Full screen operation , Skin changing operation ',
      position: 'left',
    }
  },
  {
    
    element: '#grid',
    popover: {
    
      title: ' shrinkage , Bread crumbs ',
      description: ' Click on the switch navigation bar , Crumb display ',
      position: 'right',
    }
  },
  {
    
    element: '#tagGroup',
    popover: {
    
      title: 'tag label ',
      description: ' Record the open page ',
      position: 'bottom',
    }
  },
  {
    
    element: '#mainInfo',
    popover: {
    
      title: ' Content area ',
      description: ' Display page content ',
      position: 'left',
    }
  },
  {
    
    element: '#nav',
    popover: {
    
      title: ' Navigation area ',
      description: ' Navigation function display ',
      position: 'right',
    }
  },
]

Import the node configuration file in the page that needs to be booted

<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 Inside id There should be ,json The order of data is the order of guidance