vue3.2 之 driver引导页的使用

• 安装：
  • yarn add driver.js

components / driver / index.vue

<!-- yarn add driver.js-->
<template>
  <div id="driverID" @click.prevent.stop="handleDriver">引导</div>
</template>

<script setup lang="ts" name="Driver">
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { steps } from './steps.ts'
// import { watchLang } from '@/i18n/watchLang.ts'
import i18n from '@/i18n'
const t = i18n.global.t
import { onMounted, watch } from 'vue'
let driver: any
onMounted(() => {
  initDriver()
})

const initDriver = () => {
  driver = new Driver({
    animate: false, // Whether to animate or not
    opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
    padding: 10, // Distance of element from around the edges
    allowClose: true, // Whether the click on overlay should close or not
    overlayClickNext: false, // Whether the click on overlay should move next

    doneBtnText: t('driver.doneBtnText'), // Text on the final button
    closeBtnText: t('driver.closeBtnText'), // Text on the close button for this step
    stageBackground: '#ffffff', // Background color for the staged behind highlighted element
    nextBtnText: t('driver.nextBtnText'), // Next button text for this step
    prevBtnText: t('driver.prevBtnText') // Previous button text for this step
  })
}

const handleDriver = () => {
  driver.defineSteps(steps(t))
  driver.start()
}
</script>
<style lang="scss" scoped></style>

components / driver / steps.ts

export const steps = (i18n) => [
  {
    element: '#driverID',
    popover: {
      title: i18n('driver.title'),
      description: `开始`,
      position: 'left'
    },
    onNext: (ele) => {
      console.log(ele)
    }
  },
  {
    element: '#guideID1',
    popover: {
      title: i18n('driver.title1'),
      description: '引导页1',
      position: 'bottom'
    },
    onNext: (ele) => {
      console.log(ele)
    }
  },
  {
    element: '#guideID2',
    popover: {
      title: i18n('driver.title2'),
      description: '引导页2',
      position: 'bottom'
    },
    onNext: (ele) => {
      console.log('指引结束')
    }
  }
]

使用

    <div class="test">
      <div id="guideID1">引导页1</div>
      <div id="guideID2">引导页2</div>
    </div>
<Driver class="driver-con" />

import Driver from '@/components/driver/index.vue'

效果