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

女爷i 2022-11-13 12:26 354阅读 0赞

> ## 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`，添加  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L255YXNt_size_16_color_FFFFFF_t_70]

> 5.不要忘记在下面的script脚本中进入组件  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L255YXNt_size_16_color_FFFFFF_t_70 1]

import Screenfull from '@/components/Screenfull'

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

`参考`：[https://blog.csdn.net/weixin\_44989478/article/details/107670520][https_blog.csdn.net_weixin_44989478_article_details_107670520]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L255YXNt_size_16_color_FFFFFF_t_70]: /images/20221022/1abb1e5df94a4dfd99a53807534b3339.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L255YXNt_size_16_color_FFFFFF_t_70 1]: /images/20221022/b95494c115f348f599a18f338042c857.png
[https_blog.csdn.net_weixin_44989478_article_details_107670520]: https://blog.csdn.net/weixin_44989478/article/details/107670520