vue.cli3设置单独路由页面全屏切换

不是全屏的时候

是全屏的时候

首先思想：获取当前路由页面的节点，对的节点操作定位，脱离文档流，top：0,；left：0；

1.用ref获取当前路由页面最大的div，也就是template包的第一个div，也可以是其他的

<template>
  <div ref="index"> //ref标识
      <Title :refDome='refDome'></Title>
  </div>
</template>

2.如果要把节点从父组件传到子组件的话，在data里面定义一个值，然后在mounted赋值，在传给子组件(如果没有子组件直接跳过2，直接看3)
父组件

<template>
  <div ref="index">
      <Title :refDome='refDome'></Title> //这里把data的值转给子组件Title 
  </div>
</template>
<script>
import Title from '../components/title'
export default {
    components:{
        Title
    },
    data(){
        return{
            refDome:null
        }
    },
    mounted(){
        this.refDome = this.$refs.index //在这里给data赋值，记得要在mounted赋值
    }
}

子组件props接收值

<script>
export default {
  props: ['refDome'],
}
</script>

3.然后在切换全屏的按钮上绑定@click事件，在点击当时操作节点，在data里面设置一个screen值为1，为了来回切换

// 点击切换全屏
    handleFullScreen() {
      if (this.screen % 2 == 0) {
        this.refDome.style.position = 'static'
        this.screen++
      } else {
        this.refDome.style.width = '100%'
        this.refDome.style.height = '100%'
        this.refDome.style.position = 'absolute'
        this.refDome.style.top = '0'
        this.refDome.style.left = '0'
        this.refDome.style.zIndex = '10'
        this.refDome.style.background = '#fff'
        this.screen++
      }
    },