0
点赞
收藏
分享

微信扫一扫

Vue3后台管理系统(十三)全屏组件


目录

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

二、组件封装

三、使用案例

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

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

Vue3后台管理系统(十三)全屏组件_html5

Vue3后台管理系统(十三)全屏组件_css3_02

二、组件封装

在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>

Vue3后台管理系统(十三)全屏组件_ico_03

 

Vue3后台管理系统(十三)全屏组件_css3_04

举报

相关推荐

0 条评论