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.csdn.net/weixin_44989478/article/details/107670520