vue中screenfull组件实现全屏和非全屏+怎么给页面全屏加一张图片且不需要设置js获取页面高度

1，npm install screenfull组件
2，新建screenfull文件夹，新建Index.js文件

<template>
    <div>
        <div :icon-class="isFullscreen ? 'exit-fullscreen':'fullscreen'" @click="click"></div>
    </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
    name: 'WorkspaceJsonIndex',
    name:'Screenfull',
    data() {
        
        return {
            isFullscreen:false
        };
    },

    mounted() {
        this.init()
    },
    beforeDestroy(){
        this.destroy()
    },
    methods: {
      click(){
          if(!screenfull.enabled){
              return false
          }
          screenfull.toggle()
      },  
      change(){
          this.isFullscreen=screenfull.isFullscreen
      },
      init(){
          if(screenfull.enabled){
              screenfull.on('change',this.change)
          }
      },
      destroy(){
          if(screenfull.enabled){
              screenfull.off('change',this.change)
          }
      }
    },

};
</script>

<style lang="less" scoped>
    .screenfull-svg{
        display: inline-block;
        cursor: pointer;
        fill:#5a5e66;
        width: 20px;
        height: 20px;
        vertical-align: 10px;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

3，在需要使用该组件的vue文件中

import screenfull from 'screenfull'
1

在data中

data(){
    return{
       zhankai:zhankai,
       shouqi:shouqi,
       isFullscreen:false,
        // avHeight:(document.documentElement.clientHeight || document.body.clientHeight)+'px'
    }
  },
1
2
3
4
5
6
7
8

在template中

<!-- 展开收起 -->
        < img :src="isFullscreen?shouqi:zhankai" @click="click" id="operateScreen">
1
2

引入两张图片，记得自己去找展开收起的图片

import zhankai from '@/assets/images/zhankai.png'
import shouqi from '@/assets/images/shouqi.png'
1
2

然后在methods中写事件

methods:{
        click(){
            if(!screenfull.enabled){
                return false
            }
            screenfull.toggle()
            this.isFullscreen=!this.isFullscreen

        },
        }
1
2
3
4
5
6
7
8
9
10

自己最开始这样想的？？？？？？？？往后看，，不需要再用js获取高度
实现全屏和非全屏时，有个铺满全部屏幕的那种背景图，有图片背景时一定要设置高度吗？好像是的，
全屏又没法设置高度，尤其还要点击全屏和非全屏，每个电脑屏幕也不同，所以没法设置一个高度，所以在public index.html中
在Index.html里面获取innerHeight，给屏幕设置背景的加高度

<script>

    // var heig=document.documentElement.clientHeight
    var heig=window.innerHeight
    var bodyHe=document.getElementById('app')
    // bodyHe.style.height=heig -40 +"px"
    bodyHe.style.height=heig +"px"
    window.onresize=function (){
      //  window.location.reload()
      var heig=window.innerHeight
    var bodyHe=document.getElementById('app')
    // bodyHe.style.height=heig -40 +"px"
    bodyHe.style.height=heig +"px"
        // console.log('11')
    }
   
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

不需要用js获取高度的写法在这里
重要！！css样式的设置 在报工网站首页页面学到的写全屏页面方式
看他们的背景图1920*1080，要记得以后也用这个尺寸

在vue文件中

<div class="total">
        <!-- 加入背景图 -->
    </div>

css样式
    .total{
        border:1px solid red;
        position: relative;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 600px;
    background: url(./login3.jpg) no-repeat;
    background-size: 100% 100%;
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下面这个是最重要的，在app.vue中

html,body,#app{
  height:100%;
  margin:0;
  padding:0;
}
1
2
3
4
5

或者创建css文件，写上面的内容，引入到Main.js中