vue 搭建后台管理系统-全屏组件本文介绍的是如何在后台管理系统中使用screenfull全屏组件，并进行单独的封装，以

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

A journey of a thousand miles begins with single step

持续更新中...

常用组件传送门：

vue 搭建后台管理系统-全屏组件

`screenfull` 简介

官网地址：github.com/sindresorhu…

安装

# use npm
npm install screenfull -S

# use yarn
yarn add screenfull

引入与使用

在 <script> 中引入

import screenfull from "screenfull"

模板代码

<div class="full-srcreen">
  <i class="icon-style" :class="{ 'el-icon-full-screen': !isFull, 'el-icon-tuichuquanping iconfont': isFull }" @click="toggleFull"></i>
</div>

增加点击全屏的方法

toggleFull() {
  if (!screenfull.isEnabled) {
    this.$message({ type: 'warning', message: 'you brower can not work' })
    return false
  }
  screenfull.toggle()
  this.isFull = !this.isFull
}

封装组件代码

在components 文件夹下创建 FullScreen 文件夹，在FullScreen 文件夹下创建 index.vue 文件，代码如下

<template>
  <div class="full-srcreen">
    <i class="icon-style" :class="{ 'el-icon-full-screen': !isFull, 'el-icon-tuichuquanping iconfont': isFull }" @click="toggleFull"></i>
  </div>
</template>

<script>
import screenfull from "screenfull"
export default {
  name: 'FullScreen',
  data() {
    return {
      isFull: false
    }
  },
  methods: {
    toggleFull() {
      if (!screenfull.isEnabled) {
        this.$message({ type: 'warning', message: 'you brower can not work' })
        return false
      }
      screenfull.toggle()
      this.isFull = !this.isFull
    }
  }
}
</script>

<style scoped lang="scss">
</style>