test/src/components/VHeader.vue

<template>
    <header class="header-wrap">
        <span>车场实时概况</span>
        <div class="header-fullscreen" @click="handleFullScreen"></div>
        <div class="header-time">
            <p>{{headerDay}}</p>
            <p>{{headerTime}}</p>
        </div>
    </header>
</template>
<script>
import { formateTime, formateday } from "../utils/formate";
export default {
  name: 'VHeader',
  data() {
    return {
      headerDay: formateday(),
      headerTime: formateTime(),
      fullscreen: false
    }
  },
    methods: {
      handleFullScreen(){
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
    }
}
</script>
<style scoped lang="scss">
    header {
        height: 65px;
        text-align: center;
        position: relative;
        background-image: url("../images/header/headerbg.png");
        background-repeat: no-repeat;
        background-position: center center;
        >span{
            font-size: 32px;
            line-height: 75px;
        }
        .header-fullscreen{
            width: 18px;
            height: 18px;
            line-height: 18px;
            position: absolute;
            right: 158px;
            top:25px;
            cursor:pointer;
            background: url('../images/header/righttopbarico_Bg.png');
        }
        .header-time{
            width: 128px;
            height: 35px;
            line-height: 18px;
            position: absolute;
            right: 10px;
            top:16px;
            padding-left: 45px;
            text-align: left;
            background:url("../images/header/headertime.png") no-repeat 0 center;
            background-size: 35px 35px;
        }
    }
</style>