vite+vue+ts+element-plus从零开发管理后台框架(14)-全屏切换

安装插件

npm install @vueuse/core@10.11.0

编辑src/views/Main.vuetemplateheader-right下最前面添加如下代码。

<el-icon style="margin-right: 15px;" @click="toggle">
    <rank v-if="isFullscreen" />
    <full-screen v-else />
</el-icon>

script段引入并实例化FullScreen

import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useFullscreen } from '@vueuse/core'

import * as MenuUtil from '@/util/menu'
import useMenuStore from '@/store/menu'


const route = useRoute()
const router = useRouter()
const { isFullscreen, toggle } = useFullscreen()

const menuStore = useMenuStore()

进入退出全屏

现在点击这个图标就能进入和退出全屏了

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!