1.全屏切换按钮

navbar导航添加全屏切换按钮

切换到全屏

1-1 实现Screenful组件

主要利用 screenfull npm包实现。screenfull文档说明

安装screenfull

npm install screenfull

src/components/Screenfull/index.vue

<template>
  <div>
    <svg-icon
      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="handleClick"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, ref } from 'vue'
import screenfull, { Screenfull } from 'screenfull'
/**
 * screenful 文档说明
 * https://www.npmjs.com/package/screenfull
 */
export default defineComponent({
  name: 'ScreenFull',
  setup () {
    const { proxy } = getCurrentInstance()!
    const isFullscreen = ref(false)
    const handleClick = () => {
      if (screenfull.isEnabled) { // 浏览器是否允许全屏模式
        screenfull.toggle()
        return
      }
      return proxy?.$message({
        message: 'you browser can not work',
        type: 'warning'
      })
    }
    const change = () => {
      // 更新当前全屏状态 根据状态切换对应图标
      isFullscreen.value = (screenfull as Screenfull).isFullscreen
    }
    const init = () => {
      //
      if (screenfull.isEnabled) { // 浏览器是否允许全屏模式
        // 监听全屏切换状态
        screenfull.on('change', change)
      }
    }
    onMounted(() => {
      init()
    })
    return {
      isFullscreen,
      handleClick
    }
  }
})
</script>

navbar导入组件

src/layout/components/Navbar.vue

导入组件并修改right-menu样式

<template>
  <div class="navbar">
    <hambuger  @toggleClick="toggleSidebar" :is-active="sidebar.opened"/>
    <breadcrumb />
    <div class="right-menu">
      <!-- 全屏 -->
      <screenfull id="screefull" class="right-menu-item hover-effect" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hambuger from '@/components/Hambuger/index.vue'
import { useStore } from '@/store/index'
import Screenfull from '@/components/Screenfull/index.vue'
export default defineComponent({
  name: 'Navbar',
  components: {
    Breadcrumb,
    Hambuger,
    Screenfull
  },
  setup() {
    // 使用我们自定义的useStore 具备类型提示
    // store.state.app.sidebar 对于getters里的属性没有类型提示
    const store = useStore()
    const toggleSidebar = () => {
      store.dispatch('app/toggleSidebar')
    }
    // 从getters中获取sidebar
    const sidebar = computed(() => store.getters.sidebar)
    return {
      toggleSidebar,
      sidebar
    }
  }
})
</script>
<style lang="scss">
  .navbar {
    display: flex;
    .right-menu {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
  }
</style>

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/f79ef96fdef4e30443c886c105d18a4165523b82