vue-element-admin/template的全屏功能实现

zhige@

于 2021-03-26 23:39:54 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue js svg java

本文链接：https://blog.youkuaiyun.com/nyasm/article/details/115257465

本文详细介绍了如何在自己的项目中实现vue-element-admin的全屏功能，包括将Screenfull组件复制到项目中，处理全屏图标，检查并适配不同版本screenfull库的isEnabled属性，以及在Navbar.vue中添加全屏按钮。最后提供了具体的代码实现参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-element-admin的全屏功能

1.首先把vue-element-admin中的src/components/Screenfull 复制到自己项目中

2.还有src/icons/svg下的exit-fullscreen.svg和fullscreen.svg复制到自己项目中

3.如果出现提示you browser can not work，查看src/Screenfull/index.vue，打印一下screenfull，不同的版本screenfull下的isEnabled不一样，有的是isEnabled有的是Enabled，在methods中的click方法中

click() {
      console.log(screenfull)
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },

4.然后进入src/layout/components/Navbar.vue，添加

<template v-if="device!=='mobile'">
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
</template>

5.不要忘记在下面的script脚本中进入组件

import Screenfull from '@/components/Screenfull'

components: {
    Breadcrumb,
    // eslint-disable-next-line vue/no-unused-components
    Screenfull,
    Hamburger
  },

参考：https://blog.youkuaiyun.com/weixin_44989478/article/details/107670520