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

安装插件

npm install @vueuse/core@10.11.0

编辑src/views/Main.vue，template段header-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()

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