EveryLike/pages/API/element-request-fullscreen/element-request-fullscreen.uvue

<template>
  <scroll-view class="content" direction="vertical">
    <view id="fullscreen" class="view1" @click="fullscreen" @fullscreenchange="fullscreenchange" @fullscreenerror="fullscreenerror">
      <text style="color: white;">{{ text }}</text>
    </view>
    <enum-data :items="orientation_enum" title="orientation" @change="radio_change_orientation"></enum-data>
    <enum-data :items="navigationUI_enum" title="navigationUI" @change="radio_change_ui"></enum-data>
  </scroll-view>
</template>

<script>
  import { ItemType } from '@/components/enum-data/enum-data-types';
  export default {
    data() {
      return {
        orientation_enum: [{ "value": 0, "name": "auto" }, { "value": 1, "name": "landscape" }, { "value": 2, "name": "landscape-primary" }, { "value": 3, "name": "landscape-secondary" }, { "value": 4, "name": "portrait" }] as ItemType[],
        navigationUI_enum: [{ "value": 0, "name": "auto" }, { "value": 1, "name": "hide" }, { "value": 2, "name": "show" }] as ItemType[],
        text: "点击进入全屏",
        fullscreenElement: null as UniElement | null,
        isFullscreen: false,
        orientation: "landscape",
        navigationUI: "hide",
        fullscreenchangeCount: 0
      }
    },
    onReady() {
      this.fullscreenElement = uni.getElementById('fullscreen') as UniElement
    },
    methods: {
      getCurrentPage() : UniPage {
        const pages = getCurrentPages()
        return pages[pages.length - 1]
      },
      fullscreen() {
        if (this.isFullscreen) {
          const page = this.getCurrentPage()
          page.exitFullscreen({
            success: () => {
              this.text = "点击进入全屏"
            },
            fail: (err) => {
              console.log('fail', err)
            },
            complete: () => {
              console.log('complete')
            }
          })
        } else {
          this.fullscreenElement?.requestFullscreen({
            navigationUI: this.navigationUI,
            orientation: this.orientation,
            success: () => {
              this.text = "点击退出全屏"
            },
            fail: (err) => {
              console.log('fail', err)
            },
            complete: () => {
              console.log('complete')
            }
          })
        }

        this.isFullscreen = !this.isFullscreen
      },
      fullscreenchange(e : UniEvent) {
        console.log(e.type)
        this.fullscreenchangeCount++
        console.log(this.fullscreenchangeCount)
      },
      fullscreenerror(e : UniEvent) {
        console.log(e.type)
      },
      radio_change_orientation(checked : number) {
        console.log(checked)
        this.orientation = this.orientation_enum[checked]['name'] as string
      },
      radio_change_ui(checked : number) {
        console.log(checked)
        this.navigationUI = this.navigationUI_enum[checked]['name'] as string
      }
    }
  }
</script>

<style>
  .content {
    flex: 1;
    background-color: #f0f0f0;
  }

  .view1 {
    width: 100%;
    height: 150px;
    align-items: center;
    justify-content: center;
    background-color: black;
  }
</style>