16.vue项目浏览器全屏screenfull

16.vue项目浏览器全屏screenfull

1.安装screenfull

这里使用vue ui 可视化界面

2.导入screenfull

在commonHeader.vue组件中导入
代码如下，有基础的直接看方法就可以

<template>
  <header>
    <div>
      <i class="el-icon-s-fold" v-show="!isCollapse" @click="collapseMenu"></i>
      <i class="el-icon-s-unfold" v-show="isCollapse" @click="collapseMenu"></i>
    </div>
    <div class="opt-wrapper">
      <div class="lang">
        <el-dropdown :hide-on-click="false" @command="changeLang">
          <span class="el-dropdown-link">{{ lang }}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh-CN">{{ $t('lang.chinese') }}</el-dropdown-item>
            <el-dropdown-item command="en-US">{{ $t('lang.engLish') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="fullScreen">
        <i class="iconfont icon-caozuo-quanping-shousuo" v-show="isFullscreen" @click="screen"></i>
        <i class="iconfont icon-icon-GIS_quanping" v-show="!isFullscreen" @click="screen"></i>
      </div>
      <div>
        <el-dropdown :hide-on-click="false" @command="handleCommand">
          <span class="el-dropdown-link"> <img :src="avatar" alt="" class="avatar"/></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item>
            <el-dropdown-item command="logout"><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'
import screenfull from 'screenfull'
export default {
  data() {
    return {
      isFullscreen: false, // 是否是全屏
      avatar: require('@/assets/images/admin-logo.jpg')
    }
  },
  computed: {
    ...mapState({
      isCollapse: state => state.tab.isCollapse,
      lang: state => state.header.lang
    })
  },
  created() {
    // 获取刷新之前的语言信息
    const sessionLang = JSON.parse(sessionStorage.getItem('currentLang'))
    console.log(sessionLang)
    if (sessionLang !== null) {
      // 获取到存储的路由列表之后，将信息利用vuex进行存储
      if (sessionLang.currentLang === 'EngLish') {
        this.$i18n.locale = 'en-US'
        this.$store.commit('changeLang', 'en-US')
      }
      if (sessionLang.currentLang === '中文') {
        this.$i18n.locale = 'zh-CN'
        this.$store.commit('changeLang', 'zh-CN')
      }
    }
  },
  mounted() {
    // 刷新之前存储当前语言信息
    window.addEventListener('beforeunload', e => {
      sessionStorage.setItem(
        'currentLang',
        JSON.stringify({
          currentLang: this.lang
        })
      )
    })
  },
  methods: {
    // 退出方法
    handleCommand(command) {
      if (command === 'logout') {
        sessionStorage.clear()
        sessionStorage.removeItem('tabs')
        this.$router.push('/login')
      }
      window.location.reload()
      this.$message.success('click on item ' + command)
    },
    // 控制左侧导航栏开启/关闭事件
    collapseMenu() {
      this.$store.commit('collapseMenu')
    },
    // 切换语言
    changeLang(command) {
      if (command === 'zh-CN') {
        this.$i18n.locale = 'zh-CN'
      }
      if (command === 'en-US') {
        this.$i18n.locale = 'en-US'
      }
      this.$store.commit('changeLang', command)
    },
    // 控制是否是全屏还是非全屏
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      // if (!screenfull.enabled) {
      //   this.$message('您的浏览器不能全屏')
      //   return false
      // }
      screenfull.toggle()
      this.isFullscreen = !screenfull.isFullscreen
      // console.log(screenfull.isFullscreen)
      // this.$message.success('全屏啦')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/common/header.scss';
</style>

3.效果演示

• 非全屏

• 全屏