Vue3后台管理系统（十三）全屏组件

目录

一、两个图标：全屏fullscreen.svg、退出全屏exit-fullscreen.svg

二、组件封装

三、使用案例

一、两个图标：全屏fullscreen.svg、退出全屏exit-fullscreen.svg

将两个图标放到src/assets/icons文件夹中

二、组件封装

在src/components文件夹下新建Screenfull文件夹，并在Screenfull文件夹下新建index.vue

<!--src/components/Screenfull/index.vue-->
<template>
  <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
    <svg-icon
      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="toggle"
    />
  </div>
</template>
 
<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';
import SvgIcon from '@/components/SvgIcon/index.vue';
 
const { isFullscreen, toggle } = useFullscreen();
</script>复制

三、使用案例

<!--src/App.vue-->
<script setup lang="ts">
import Screenfull from '@/components/Screenfull/index.vue'
</script>
 
<template>
  <div>
    <screenfull id="screenfull"></screenfull>
  </div>
</template>
 
<style>
 
</style>复制