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

雨点打透心脏的1/2处 2024-03-26 13:41 55阅读 0赞

**目录**

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

二、组件封装

三、使用案例

--------------------

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

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

![f1209d7d38ad43eba5419daa3d366f7a.png][]![dc52ff8b4f3e406891e29636a373c0c1.png][]

#### 二、组件封装 ####

在src/components文件夹下新建Screenfull文件夹，并在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>

#### 三、使用案例 ####

<script setup lang="ts">
    import Screenfull from '@/components/Screenfull/index.vue'
    </script>
    
    <template>
      <div>
        <screenfull id="screenfull"></screenfull>
      </div>
    </template>
    
    <style>
    
    </style>

![3cefed4326fb4f03a7cc8cba9fbb62fc.png][]

![e948a6ccefe14d6faf8bbb891486043d.png][]

[f1209d7d38ad43eba5419daa3d366f7a.png]: https://img-blog.csdnimg.cn/f1209d7d38ad43eba5419daa3d366f7a.png
[dc52ff8b4f3e406891e29636a373c0c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7b89b487198040cbaa00cd694d145651.png
[3cefed4326fb4f03a7cc8cba9fbb62fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/afc25745aeea40b1ba87a2ad9459439d.png
[e948a6ccefe14d6faf8bbb891486043d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/593ce007b1634e58b9df1f9656828d5b.png