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

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