安装

1
$ yarn add screenfull

组件

components/Screenfull.vue

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
<template>
  <v-btn icon @click="onFullscreenClicked">
    <v-icon>
      {{ isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}
    </v-icon>
  </v-btn>
</template>
<script>
import screenfull from "screenfull";
export default {
  name: "Screenfull",
  data: () => ({
    isFullscreen: false
  }),
  mounted() {
    if (screenfull.isEnabled) {
      screenfull.on("change", this.changeFullscreen);
    }
  },
  methods: {
    onFullscreenClicked() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    },
    changeFullscreen() {
      this.isFullscreen = screenfull.isFullscreen;
    }
  },
  destroyed() {
    screenfull.off("change", this.changeFullscreen);
  }
};
</script>

在需要使用的地方添加此组件即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <v-app id="inspire">
    <v-app-bar app>
      <v-app-bar-nav-icon @click="toggleNavi()"></v-app-bar-nav-icon>
      <v-toolbar-title>{{ $t("app.name") }}</v-toolbar-title>
      <v-spacer />
      <Screenfull />
    </v-app-bar>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>
<script>
export default {
  components: {
    Screenfull: () => import("./components/Screenfull")
  }
}
</script>

Reference