vue3制作全屏缩放功能以及引导页

一、全屏缩放功能

1.安装

npm i screenfull@5.1.0

2.使用

<template>
<div @click="handleFullScreen">
  <svg-icon
    :icon="screen ? 'exit-fullscreen' : 'fullscreen'"
  ></svg-icon>
</div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import screenfull from "screenfull";

const screen = ref(false)
const handleFullScreen = () => {
  screen.value=!screen.value
  if(screenfull.isEnabled) return screenfull.toggle()
}
</script>

二、引导页

1.安装

npm i driver.js

2.创建steps.ts文件

export const steps = [
  {
    element: '#guide',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#hamburger',
    popover: {
      title: 'Breadcrumb',
      description: 'Indicate the current page location',
      position: 'right'
    }
  }
]

3.使用

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

<script lang="ts" setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import {onMounted} from "vue";
import {steps} from "@/layout/Header/components/driver/steps";

let driver:any;
onMounted(()=>{
  driver=new Driver({
    opacity: 0.75,
    animate: false,  // 否则图标消失
    padding: 10,
    allowClose: true, //禁止点击外部关闭
    overlayClickNext: false,  //如果它在覆盖上移动到下一步，请单击
    doneBtnText: '完成', // 完成按钮标题
    closeBtnText: '关闭', // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: '下一步', // 下一步按钮标题
    prevBtnText: '上一步', // 上一步按钮标题
  })
})
const handleGuide = ()=>{
  driver.defineSteps(steps)
  driver.start()
}

</script>

若使用i18n
steps.ts

export const steps =(i18n:any) => [
  {
    element: '#guide',
    popover: {
      title: i18n('driver.guideBtn'),
      description: '接下来让我来介绍一下如何使用叭~',
      position: 'left'
    }
  },
  {
    element: '#hamburger',
    popover: {
      title: i18n('driver.hamburgerBtn'),
      description: '对菜单进行伸缩控制',
      position: 'right'
    }
  },
  {
    element: '#fullScreen',
    popover: {
      title: i18n('driver.fullScreen'),
      description: '对屏幕缩放控制',
      position: 'left'
    }
  },
]

index.vue

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

<script lang="ts" setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import {onMounted} from "vue";
import {steps} from "@/layout/Header/components/driver/steps";
import i18n from "@/i18n";
import {watchLang} from '@/i18n/language/index.ts'

const t = i18n.global.t
let driver:any;
onMounted(()=>{
  initDriver()
})
const initDriver = ()=>{
  driver=new Driver({
    opacity: 0.75,
    animate: false,  // 否则图标消失
    padding: 10,
    allowClose: true, //禁止点击外部关闭
    overlayClickNext: false,  //如果它在覆盖上移动到下一步，请单击
    doneBtnText: t('driver.doneBtnText'), // 完成按钮标题
    closeBtnText: t('driver.closeBtnText'), // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: t('driver.nextBtnText'), // 下一步按钮标题
    prevBtnText: t('driver.prevBtnText'), // 上一步按钮标题
  })
}
watchLang(initDriver)

const handleGuide = ()=>{
  driver.defineSteps(steps(t))
  driver.start()
}

</script>

language.ts

import en from './en'
import zh from './zh'
import {watch} from "vue";
import store from "@/store";

//监听当前的语言
export const watchLang= (...cbs: object[])=>{
  watch(
    ()=>store.getters.lang,
    ()=>{
      cbs.forEach((cb:any)=>cb(store.getters.lang))
      console.log(store.getters.lang);
    },
    {deep:true,immediate:true})
}

export default {
  en,
  zh
}