vue项目中使用screenfull.js实现全屏功能

1. 安装screenfull.js插件（在npm官网上有）

npm install screenfull --save 

2. 在vue项目中 src/components/ScreenFull/index.vue（写成公共组件）

<template>
  <el-tooltip effect="dark" content="全屏" placement="bottom">
    <img @click="screen" class="pointer" :src="require('@/assets/images/screenful.png')" :width="width" :height="height">
  </el-tooltip>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'screenful',
  components: {
  },
  props: {
    width: {
      type: Number,
      default: 20
    },
    height: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    screen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>

3. 使用screenful组件

<template>
    <screenfull class="ml64" :width="20" :height="20"></screenfull>
</template>
<script>
import screenfull from '@/components/ScreenFull'
export default {
  name: 'navbar',
  components: {
    screenfull
  },
  data() {
    return {
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
  },
  created() {
  },
  mounted() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>