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()
现在点击这个图标就能进入和退出全屏了
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: