vue는 스크린풀 플러그인을 사용하여 전체 화면 기능을 실현합니다

본고의 실례는 여러분에게 vue가 screenfull 플러그인을 사용하여 전체 화면 기능을 실현하는 구체적인 코드를 공유하여 참고하도록 하였습니다. 구체적인 내용은 다음과 같습니다.
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>

이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.