vue3.2 引导页

     官网地址：

1. github：https://github.com/kamranahmedse/driver.js
2. 用法和用例介绍：https://kamranahmed.info/driver.js/
3. 简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/

1、安装

npm install driver.js

 2.layout创建driver文件夹-》index.vue

<template>
  <div id="guide" @click.prevent.stop="handleGuide">
    <svg-icon icon="guide"></svg-icon>
  </div>
</template>

<script setup>
// 引用driver
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
// 引用setps
import { steps } from './steps.js'
import { onMounted } from 'vue'
// 引入i8n
import { watchLang } from '@/i18n/watchlang'
import i18n from '@/i18n'
const t = i18n.global.t
let driver

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
  })
}

watchLang(initDriver)
// 使用
const handleGuide = () => {
  driver.defineSteps(steps(t))
  driver.start()
}
</script>
<style scoped></style>

3.driver->steps.js(引用的元素和出现的内容)

export const steps = (i18n) => [
  {
    element: '#guide',
    popover: {
      title: i18n('driver.guideBtn'),
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#hamburger',
    popover: {
      title: i18n('driver.hamburgerBtn'),
      description: 'Body of the popover',
      position: 'bottom'
    }
  },
  {
    element: '#screenFull',
    popover: {
      title: i18n('driver.fullScreen'),
      description: 'Body of the popover',
      position: 'left'
    }
  }
]

4.使用到了i8n的监听 @/i18n/watchlang.js

import { watch } from 'vue'
import store from '@/store'

// 外界不会传入一个参数，所以。。。cbs
export const watchLang = (...cbs) => {
  watch(
    () => store.getters.lang,
    () => {
      cbs.forEach((cb) => cb(store.getters.lang))
    },
    { deep: true }
  )
}