Unielement

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view style="padding: 15px;">
      <view id="box" ref="boxRef">
        <text class="uni-title-text">元素的id：{{ data.attrId }}</text>
        <!-- #ifndef APP -->
        <text class="uni-title-text">元素的style：{{ data.attrStyle }}</text>
        <!-- #endif -->
        <text class="uni-title-text">元素的背景色样式值：{{ data.propertyValue }}</text>
        <text class="uni-subtitle-text">小程序端：getAttribute 获取元素的属性值，目前仅支持id、style</text>
        <text class="uni-subtitle-text">App端：getAttribute 不支持获取 class、style 属性</text>
      </view>
      <button @click="getAttributeId">getAttribute获取元素的id</button>
      <button @click="setStyle">setProperty设置背景色</button>
      <!-- #ifndef APP -->
      <button @click="getAttributeStyle">getAttribute获取元素的style</button>
      <!-- #endif -->
      <button @click="getPropertyValue">getPropertyValue获取背景色值</button>

      <child id="child" ref="childRef"></child>
      <button @click="getBoundingClientRectAsyncChild">获取自定义组件child元素信息</button>
      <view class="rect-info" v-if="data.rectInfo">
        <view class="node-info-item">
          <text class="node-info-item-k">x: </text>
          <text class="node-info-item-v">{{data.rectInfo.x}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">y: </text>
          <text class="node-info-item-v">{{data.rectInfo.y}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">width: </text>
          <text class="node-info-item-v">{{data.rectInfo.width}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">height: </text>
          <text class="node-info-item-v">{{data.rectInfo.height}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">left: </text>
          <text class="node-info-item-v">{{data.rectInfo.left}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">top: </text>
          <text class="node-info-item-v">{{data.rectInfo.top}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">right: </text>
          <text class="node-info-item-v">{{data.rectInfo.right}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">bottom: </text>
          <text class="node-info-item-v">{{data.rectInfo.bottom}}</text>
        </view>
      </view>
      <scroll-view ref="scrollViewRef" class="scroll-view_H" direction="horizontal">
        <view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
        <view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
        <view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
      </scroll-view>
      <!-- #ifndef WEB -->
      <button @click="scrollTo">scrollTo设置left滚动200px</button>
      <!-- #endif -->

      <view id="scaledView" style="transform: scale(2);background-color: green;width: 50px;height: 50px;margin-top: 45px;margin-left: 25px;"></view>

      <button type="default" @click="handleGetScaledViewSize" style="margin-top: 30px;">获取scale后的view尺寸信息</button>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script setup lang="uts">

  import child from './child.uvue'

  type DomRectType = {
    x : number,
    y : number,
    left : number,
    top : number,
    right : number,
    bottom : number,
    width : number,
    height : number,
  }

  type DataType = {
    attrId: string,
    attrStyle: string,
    propertyValue: string,
    rectInfo: DomRectType,
    scaledViewWidth: number,
    scaledViewHeight: number
  }

  const boxRef = ref<UniElement | null>(null)
  const scrollViewRef = ref<UniScrollViewElement | null>(null)
  const data = reactive({
    attrId: "",
    attrStyle: "",
    propertyValue: "",
    rectInfo: {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    scaledViewWidth: 0,
    scaledViewHeight: 0
  } as DataType)

  function getBoundingClientRectAsyncChild(){
    const childEl = uni.getElementById('child')!
    childEl.getBoundingClientRectAsync()!.then((rect : DOMRect) => {
      console.log('rect: ',rect);
      data.rectInfo = {
        x: rect.x,
        y: rect.y,
        width: rect.width,
        height: rect.height,
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
      } as DomRectType
    })
  }

  function getAttributeId() {
    if (boxRef.value != null) {
      data.attrId = boxRef.value!.getAttribute('id') ?? ""
    }
  }

  function setStyle() {
    if (boxRef.value != null) {
      boxRef.value!.style.setProperty("background-color", "#FFF000")
    }
  }

  function getPropertyValue() {
    if (boxRef.value != null) {
      data.propertyValue = boxRef.value!.style.getPropertyValue("background-color")
    }
  }

  function getAttributeStyle() {
    if (boxRef.value != null) {
      data.attrStyle = boxRef.value!.getAttribute('style')?? ""
    }
  }

  function scrollTo() {
    if (scrollViewRef.value != null) {
      // #ifdef MP-WEIXIN
      scrollViewRef.value!.scrollTo({
        left: 200
      })
      // #endif
      // #ifndef MP-WEIXIN
      scrollViewRef.value!.scrollTo(200,0)
      // #endif
    }
  }

  const handleGetScaledViewSize = () => {
    const element = uni.getElementById("scaledView")
    if (element != null) {
      const rect = element.getBoundingClientRect()
      data.scaledViewWidth = rect.width
      data.scaledViewHeight = rect.height
      console.log("scaledView size : ", data.scaledViewWidth, data.scaledViewHeight);
    }
  }

  onReady(() => {
    // Refs are already assigned via template
  })

  defineExpose({
    data,
    getAttributeId,
    setStyle,
    getAttributeStyle,
    getPropertyValue,
    getBoundingClientRectAsyncChild,
    scrollTo,
    handleGetScaledViewSize
  })

</script>
<style>
  .scroll-view_H {
    width: 100%;
    flex-direction: row;
    margin-top:15px;
  }
  .scroll-view-item_H {
    width: 100%;
    height: 150px;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 18px;
    color: #ffffff;
  }

  .rect-info {
    margin-top: 15px;
    padding: 10px;
    flex-direction: column;
  }

  .node-info-item {
    flex-direction: row;
  }

  .node-info-item-k {
    width: 72px;
    line-height: 2;
  }

  .node-info-item-v {
    font-weight: bold;
    line-height: 2;
  }
</style>

//通过组件定义的id属性值，获取到UniElement对象
const element = uni.getElementById(id)
//getAndroidView不设置泛型，获取到安卓View
if(element != null) {
	const view = element.getAndroidView()
}

//导入安卓原生WebView对象
import WebView from "android.webkit.WebView"

//通过web-view组件定义的id属性值，获取web-view标签的UniElement对象
const webViewElement = uni.getElementById(id)
//getAndroidView设置泛型为安卓底层WebView对象, 直接获取WebView 如果泛型不匹配会返回null
if(webViewElement != null) {
	const webview = webViewElement.getAndroidView<WebView>()
}

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view class="page" id="page">
      <page-head :title="title"></page-head>
      <button class="uni-common-mt" @click="getBoundingClientRectAsync">getBoundingClientRectAsync</button>
      <view id="rect-test" ref="rectTest" class="rect-test"></view>
      <view class="rect-info" v-if="data.rectInfo != null">
        <view class="node-info-item">
          <text class="node-info-item-k">x: </text>
          <text class="node-info-item-v">{{data.rectInfo!.x}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">y: </text>
          <text class="node-info-item-v">{{data.rectInfo!.y}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">width: </text>
          <text class="node-info-item-v">{{data.rectInfo!.width}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">height: </text>
          <text class="node-info-item-v">{{data.rectInfo!.height}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">left: </text>
          <text class="node-info-item-v">{{data.rectInfo!.left}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">top: </text>
          <text class="node-info-item-v">{{data.rectInfo!.top}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">right: </text>
          <text class="node-info-item-v">{{data.rectInfo!.right}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">bottom: </text>
          <text class="node-info-item-v">{{data.rectInfo!.bottom}}</text>
        </view>
      </view>

      <!-- 新增 getBoundingClientRect 同步方法测试 -->
      <view class="section-divider"></view>
      <text class="section-title">getBoundingClientRect 方法测试</text>

      <!-- View 元素测试 -->
      <view class="test-group">
        <view class="test-buttons">
          <button class="btn-small" type="default" @click="getViewRect">View</button>
          <button class="btn-small" @click="getViewRectFlat">View(拍平测试)</button>
        </view>
        <view class="test-elements">
          <view id="rect-test-view" class="rect-test-small"></view>
          <view id="rect-test-view-flat" class="rect-test-small" flatten></view>
        </view>
      </view>
      <view class="rect-row"  v-if="syncData.viewRectInfo != null || syncData.viewRectInfoFlat != null">
        <view class="rect-data-col" v-if="syncData.viewRectInfo != null">
          <text class="rect-data-item">x: {{syncData.viewRectInfo!.x}}</text>
          <text class="rect-data-item">y: {{syncData.viewRectInfo!.y}}</text>
          <text class="rect-data-item">width: {{syncData.viewRectInfo!.width}}</text>
          <text class="rect-data-item">height: {{syncData.viewRectInfo!.height}}</text>
          <text class="rect-data-item">left: {{syncData.viewRectInfo!.left}}</text>
          <text class="rect-data-item">top: {{syncData.viewRectInfo!.top}}</text>
          <text class="rect-data-item">right: {{syncData.viewRectInfo!.right}}</text>
          <text class="rect-data-item">bottom: {{syncData.viewRectInfo!.bottom}}</text>
        </view>
        <view class="rect-data-col" v-if="syncData.viewRectInfoFlat != null">
          <text class="rect-data-item">x: {{syncData.viewRectInfoFlat!.x}}</text>
          <text class="rect-data-item">y: {{syncData.viewRectInfoFlat!.y}}</text>
          <text class="rect-data-item">width: {{syncData.viewRectInfoFlat!.width}}</text>
          <text class="rect-data-item">height: {{syncData.viewRectInfoFlat!.height}}</text>
          <text class="rect-data-item">left: {{syncData.viewRectInfoFlat!.left}}</text>
          <text class="rect-data-item">top: {{syncData.viewRectInfoFlat!.top}}</text>
          <text class="rect-data-item">right: {{syncData.viewRectInfoFlat!.right}}</text>
          <text class="rect-data-item">bottom: {{syncData.viewRectInfoFlat!.bottom}}</text>
        </view>
      </view>

      <!-- Text 元素测试 -->
      <view class="test-group">
        <view class="test-buttons">
          <button class="btn-small" @click="getTextRect">Text</button>
          <button class="btn-small" @click="getTextRectFlat">Text(拍平测试)</button>
        </view>
        <view class="test-elements">
          <text id="rect-test-text" class="rect-test-text-small">测试文本</text>
          <text id="rect-test-text-flat" class="rect-test-text-small" flatten>测试文本拍平</text>
        </view>
      </view>
      <view class="rect-row" v-if="syncData.textRectInfo != null || syncData.textRectInfoFlat != null">
        <view class="rect-data-col" v-if="syncData.textRectInfo != null">
          <text class="rect-data-item">x: {{syncData.textRectInfo!.x}}</text>
          <text class="rect-data-item">y: {{syncData.textRectInfo!.y}}</text>
          <text class="rect-data-item">width: {{syncData.textRectInfo!.width}}</text>
          <text class="rect-data-item">height: {{syncData.textRectInfo!.height}}</text>
          <text class="rect-data-item">left: {{syncData.textRectInfo!.left}}</text>
          <text class="rect-data-item">top: {{syncData.textRectInfo!.top}}</text>
          <text class="rect-data-item">right: {{syncData.textRectInfo!.right}}</text>
          <text class="rect-data-item">bottom: {{syncData.textRectInfo!.bottom}}</text>
        </view>
        <view class="rect-data-col" v-if="syncData.textRectInfoFlat != null">
          <text class="rect-data-item">x: {{syncData.textRectInfoFlat!.x}}</text>
          <text class="rect-data-item">y: {{syncData.textRectInfoFlat!.y}}</text>
          <text class="rect-data-item">width: {{syncData.textRectInfoFlat!.width}}</text>
          <text class="rect-data-item">height: {{syncData.textRectInfoFlat!.height}}</text>
          <text class="rect-data-item">left: {{syncData.textRectInfoFlat!.left}}</text>
          <text class="rect-data-item">top: {{syncData.textRectInfoFlat!.top}}</text>
          <text class="rect-data-item">right: {{syncData.textRectInfoFlat!.right}}</text>
          <text class="rect-data-item">bottom: {{syncData.textRectInfoFlat!.bottom}}</text>
        </view>
      </view>

      <!-- Image 元素测试 -->
      <view class="test-group">
        <view class="test-buttons">
          <button class="btn-small" @click="getImageRect">Image</button>
          <button class="btn-small" @click="getImageRectFlat">Image(拍平测试)</button>
        </view>
        <view class="test-elements">
          <image id="rect-test-image" class="rect-test-image-small" src="/static/test-image/logo.png" mode="aspectFit"></image>
          <image id="rect-test-image-flat" class="rect-test-image-small" src="/static/test-image/logo.png" mode="aspectFit" flatten></image>
        </view>
      </view>
      <view class="rect-row" v-if="syncData.imageRectInfo != null || syncData.imageRectInfoFlat != null" >
        <view class="rect-data-col" v-if="syncData.imageRectInfo != null">
          <text class="rect-data-item">x: {{syncData.imageRectInfo!.x}}</text>
          <text class="rect-data-item">y: {{syncData.imageRectInfo!.y}}</text>
          <text class="rect-data-item">width: {{syncData.imageRectInfo!.width}}</text>
          <text class="rect-data-item">height: {{syncData.imageRectInfo!.height}}</text>
          <text class="rect-data-item">left: {{syncData.imageRectInfo!.left}}</text>
          <text class="rect-data-item">top: {{syncData.imageRectInfo!.top}}</text>
          <text class="rect-data-item">right: {{syncData.imageRectInfo!.right}}</text>
          <text class="rect-data-item">bottom: {{syncData.imageRectInfo!.bottom}}</text>
        </view>
        <view class="rect-data-col" v-if="syncData.imageRectInfoFlat != null">
          <text class="rect-data-item">x: {{syncData.imageRectInfoFlat!.x}}</text>
          <text class="rect-data-item">y: {{syncData.imageRectInfoFlat!.y}}</text>
          <text class="rect-data-item">width: {{syncData.imageRectInfoFlat!.width}}</text>
          <text class="rect-data-item">height: {{syncData.imageRectInfoFlat!.height}}</text>
          <text class="rect-data-item">left: {{syncData.imageRectInfoFlat!.left}}</text>
          <text class="rect-data-item">top: {{syncData.imageRectInfoFlat!.top}}</text>
          <text class="rect-data-item">right: {{syncData.imageRectInfoFlat!.right}}</text>
          <text class="rect-data-item">bottom: {{syncData.imageRectInfoFlat!.bottom}}</text>
        </view>
      </view>

      <!-- ScrollView 元素测试 -->
      <button class="uni-common-mt" @click="getScrollViewRect">getBoundingClientRect - ScrollView</button>
      <scroll-view id="rect-test-scrollview" class="rect-test-scrollview">
        <view class="scroll-content">
          <text class="scroll-text">滚动区域内容1</text>
        </view>
        <view class="scroll-content">
          <text class="scroll-text">滚动区域内容2</text>
        </view>
        <view class="scroll-content">
          <text class="scroll-text">滚动区域内容2</text>
        </view>
      </scroll-view>
      <view class="rect-info" v-if="syncData.scrollViewRectInfo != null">
        <view class="node-info-item">
          <text class="node-info-item-k">x: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.x}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">y: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.y}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">width: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.width}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">height: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.height}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">left: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.left}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">top: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.top}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">right: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.right}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">bottom: </text>
          <text class="node-info-item-v">{{syncData.scrollViewRectInfo!.bottom}}</text>
        </view>
      </view>

      <!-- 自定义组件测试 -->
      <button class="uni-common-mt" @click="getCustomComponentRect">getBoundingClientRect - 自定义组件</button>
      <child id="rect-test-component" class="uni-common-mt"></child>
      <view class="rect-info" v-if="syncData.customComponentRectInfo != null">
        <view class="node-info-item">
          <text class="node-info-item-k">x: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.x}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">y: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.y}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">width: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.width}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">height: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.height}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">left: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.left}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">top: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.top}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">right: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.right}}</text>
        </view>
        <view class="node-info-item">
          <text class="node-info-item-k">bottom: </text>
          <text class="node-info-item-v">{{syncData.customComponentRectInfo!.bottom}}</text>
        </view>
      </view>

   </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import Child from './child.uvue'

  type DomRectType = {
    x : number,
    y : number,
    left : number,
    top : number,
    right : number,
    bottom : number,
    width : number,
    height : number,
  }

  type DataType = {
    rectInfo: DomRectType,
  }

  type SyncDataType = {
    viewRectInfo: DomRectType | null,
    textRectInfo: DomRectType | null,
    imageRectInfo: DomRectType | null,
    viewRectInfoFlat: DomRectType | null,
    textRectInfoFlat: DomRectType | null,
    imageRectInfoFlat: DomRectType | null,
    scrollViewRectInfo: DomRectType | null,
    customComponentRectInfo: DomRectType | null,
  }

  const title = ref('getBoundingClientRectAsync')
  const rectTest = ref<UniElement | null>(null)

  const data = reactive({
    rectInfo: {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  } as DataType)

  const syncData = reactive({
    viewRectInfo: null,
    textRectInfo: null,
    imageRectInfo: null,
    viewRectInfoFlat: null,
    textRectInfoFlat: null,
    imageRectInfoFlat: null,
    scrollViewRectInfo: null,
    customComponentRectInfo: null,
  } as SyncDataType)

  function getBoundingClientRectAsync() {
    if (rectTest.value != null) {
      rectTest.value!.getBoundingClientRectAsync()!.then((rect : DOMRect) => {
        data.rectInfo = {
          x: rect.x,
          y: rect.y,
          width: rect.width,
          height: rect.height,
          left: rect.left,
          top: rect.top,
          right: rect.right,
          bottom: rect.bottom,
        } as DomRectType
      })
    }
  }

  // 通用方法：获取元素的位置信息
  function getRectInfo(elementId: string, dataKey: keyof SyncDataType) {
    const element = uni.getElementById(elementId)!
    const rect = element.getBoundingClientRect()
    syncData[dataKey] = {
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height,
      left: rect.left,
      top: rect.top,
      right: rect.right,
      bottom: rect.bottom,
    } as DomRectType
  }

  function getViewRect() {
    getRectInfo('rect-test-view', 'viewRectInfo')
  }

  function getTextRect() {
    getRectInfo('rect-test-text', 'textRectInfo')
  }

  function getImageRect() {
    getRectInfo('rect-test-image', 'imageRectInfo')
  }

  function getViewRectFlat() {
    getRectInfo('rect-test-view-flat', 'viewRectInfoFlat')
  }

  function getTextRectFlat() {
    getRectInfo('rect-test-text-flat', 'textRectInfoFlat')
  }

  function getImageRectFlat() {
    getRectInfo('rect-test-image-flat', 'imageRectInfoFlat')
  }

  function getScrollViewRect() {
    getRectInfo('rect-test-scrollview', 'scrollViewRectInfo')
  }

  function getCustomComponentRect() {
    getRectInfo('rect-test-component', 'customComponentRectInfo')
  }

  defineExpose({
    data,
    syncData,
    getBoundingClientRectAsync,
    getViewRect,
    getTextRect,
    getImageRect,
    getViewRectFlat,
    getTextRectFlat,
    getImageRectFlat,
    getScrollViewRect,
    getCustomComponentRect
  })
</script>

<style>
  .page {
    padding: 15px;
  }

  .rect-test {
    margin-top: 15px;
    height: 100px;
    background-color: dodgerblue;
  }

  .rect-info {
    margin-top: 15px;
    flex-direction: column;
  }

  .node-info-item {
    flex-direction: row;
  }

  .node-info-item-k {
    width: 72px;
    line-height: 2;
  }

  .node-info-item-v {
    font-weight: bold;
    line-height: 2;
  }

  .section-divider {
    margin-top: 30px;
    height: 1px;
    background-color: #e0e0e0;
  }

  .section-title {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .test-group {
    margin-top: 20px;
    flex-direction: column;
  }

  .test-buttons {
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .btn-small {
    padding: 5px 15px;
    font-size: 13px;
    border-radius: 4px;
    flex: 1;
    margin: 0 5px;
  }

  .test-elements {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
  }

  .rect-test-small {
    width: 45%;
    height: 60px;
    background-color: dodgerblue;
  }

  .rect-test-text-small {
    width: 45%;
    padding: 8px;
    font-size: 14px;
    color: #fff;
    background-color: #ff6b6b;
  }

  .rect-test-image-small {
    width: 45%;
    height: 60px;
    background-color: #f0f0f0;
  }

  .rect-row {
    flex-direction: row;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e7ed;
  }

  .rect-data-col {
    flex: 1;
    flex-direction: column;
    margin: 0 5px;
  }

  .rect-data-item {
    font-size: 12px;
    line-height: 1.8;
    color: #606266;
  }

  .rect-test-scrollview {
    margin-top: 15px;
    height: 120px;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
  }

  .scroll-content {
    height: 120px;
    padding: 10px;
    border: 1px solid #37b4ea;
    justify-content: center;
    align-items: center;
  }

  .scroll-text {
    line-height: 30px;
    font-size: 14px;
    color: #606266;
  }

</style>

//通过 webViewElementId 获取 web-view 标签的 UniElement 对象
const webViewElement = uni.getElementById(webViewElementId)
//获取原生 view
const view = webViewElement?.getIOSView();
//判断 view 是否存在，类型是否为 WKWebView
if (view != null && view instanceof WKWebView) {
    //将 view 转换为 WKWebView 类型
    const webView = view! as WKWebView;
}

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view id="snapshot-content">
      <page-head title="对本页面根view截图"></page-head>
      <view class="uni-padding-wrap">
        <text>this is text</text>
      </view>
      <button class="uni-btn btn-TakeSnapshot" type="primary" @tap="takeSnapshotClick">
        点击截图并替换显示下方图片
      </button>
      <image class="snapshot-original-image" :src="data.snapImage" :mode="mode" @longpress="saveToAlbum"></image>

      <!-- 新增 takeSnapshot 测试 -->
      <view class="section-divider"></view>
      <text class="section-title">takeSnapshot 测试</text>

      <!-- View 元素测试 -->
      <view class="test-group">
        <view class="test-buttons">
          <button class="btn-small" @click="takeViewSnapshot">View</button>
        </view>
        <view class="test-elements">
          <view id="snapshot-test-view" class="snapshot-test-small"></view>
        </view>
      </view>
      <!-- View 截图展示 -->
      <view class="snapshot-row" v-if="snapshotData.viewSnapshot != null">
        <view class="snapshot-data-col">
          <text class="snapshot-data-subtitle">截图结果</text>
          <image class="snapshot-preview" :src="snapshotData.viewSnapshot" mode="aspectFit" @longpress="saveToAlbum"></image>
        </view>
      </view>

      <!-- Text 元素测试 -->
      <view class="test-group">
        <view class="test-buttons">
          <button class="btn-small" @click="takeTextSnapshot">Text</button>
        </view>
        <view class="test-elements">
          <text id="snapshot-test-text" class="snapshot-test-text-small">测试文本</text>
        </view>
      </view>
      <!-- Text 截图展示 -->
      <view class="snapshot-row" v-if="snapshotData.textSnapshot != null">
        <view class="snapshot-data-col">
          <text class="snapshot-data-subtitle">截图结果</text>
          <image class="snapshot-preview" :src="snapshotData.textSnapshot" mode="aspectFit" @longpress="saveToAlbum"></image>
        </view>
      </view>

      <!-- Image 元素测试 -->
      <view class="test-group">
        <view class="test-buttons">
          <button class="btn-small" @click="takeImageSnapshot">Image</button>
        </view>
        <view class="test-elements">
          <image id="snapshot-test-image" class="snapshot-test-image-small" src="/static/test-image/logo.png" mode="aspectFit"></image>
        </view>
      </view>
      <!-- Image 截图展示 -->
      <view class="snapshot-row" v-if="snapshotData.imageSnapshot != null">
        <view class="snapshot-data-col">
          <text class="snapshot-data-subtitle">截图结果</text>
          <image class="snapshot-preview" :src="snapshotData.imageSnapshot" mode="aspectFit" @longpress="saveToAlbum"></image>
        </view>
      </view>

      <!-- ScrollView 元素测试 -->
      <button class="btn uni-common-mt" type="default" @click="takeScrollViewSnapshot">takeSnapshot - ScrollView</button>
      <scroll-view id="snapshot-test-scrollview" class="snapshot-test-scrollview">
        <view class="scroll-content">
          <text class="scroll-text">滚动区域内容1</text>
        </view>
        <view class="scroll-content">
          <text class="scroll-text">滚动区域内容2</text>
        </view>
        <view class="scroll-content">
          <text class="scroll-text">滚动区域内容3</text>
        </view>
      </scroll-view>
      <image v-if="snapshotData.scrollViewSnapshot" class="snapshot-result-image" :src="snapshotData.scrollViewSnapshot" mode="widthFix" @longpress="saveToAlbum"></image>
      <text v-else class="snapshot-placeholder-center">暂无截图</text>

      <!-- 自定义组件测试 -->
      <button class="btn uni-common-mt" type="default" @click="takeCustomComponentSnapshot">takeSnapshot - 自定义组件</button>
      <child id="snapshot-test-component" class="snapshot-test-component"></child>
      <image v-if="snapshotData.customComponentSnapshot" class="snapshot-result-image uni-common-mb" :src="snapshotData.customComponentSnapshot" mode="widthFix" @longpress="saveToAlbum"></image>
      <text v-else class="snapshot-placeholder-center">暂无截图</text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import Child from './child.uvue'

  type DataType = {
    snapImage: string,
    completeTriggered: boolean,
  }

  type SnapshotDataType = {
    viewSnapshot: string,
    textSnapshot: string,
    imageSnapshot: string,
    scrollViewSnapshot: string,
    customComponentSnapshot: string,
  }

  const mode = ref("center")//aspectFit
  const data = reactive({
    snapImage: "/static/test-image/logo.png",
    completeTriggered: false,
  } as DataType)

  const snapshotData = reactive({
    viewSnapshot: '',
    textSnapshot: '',
    imageSnapshot: '',
    scrollViewSnapshot: '',
    customComponentSnapshot: '',
  } as SnapshotDataType)

  function takeSnapshotClick() {
    const view = uni.getElementById('snapshot-content')!
    view.takeSnapshot({
      success: (res) => {
        console.log('takeSnapshot success', res.tempFilePath)
        data.snapImage = res.tempFilePath
        mode.value = 'widthFix'
        uni.showToast({
          title: '截图成功，路径：' + res.tempFilePath,
          icon: "none"
        })
      },
      fail: (res) => {
        console.log('takeSnapshot fail', res)
        uni.showToast({
          icon: 'error',
          title: '截图失败'
        })
      },
      complete: (res) => {
        data.completeTriggered = true
        console.log('takeSnapshot complete', res)
      }
    })
  }

  function saveToAlbum(e : TouchEvent) {
    // console.log(e.currentTarget!.getAttribute("src"));
    let filePath : string = e.currentTarget!.getAttribute("src") as string
    uni.showActionSheet({
      itemList: ["保存"],
      success: res => {
        // console.log(res.tapIndex);
        if (res.tapIndex == 0) {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success() {
              uni.showToast({
                position: "center",
                icon: "none",
                title: "图片保存成功，请到手机相册查看"
              })
            },
            fail(e) {
              uni.showModal({
                content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
                showCancel: false
              });
            }
          })
        }
      },
      fail: () => { },
      complete: () => { }
    });
  }

  // 通用方法：对元素进行截图
  function takeSnapshotForElement(elementId: string, dataKey: keyof SnapshotDataType) {
    const element = uni.getElementById(elementId)!
    element.takeSnapshot({
      success: (res) => {
        // console.log('takeSnapshot success', elementId, res.tempFilePath)
        snapshotData[dataKey] = res.tempFilePath
        uni.showToast({
          title: '截图成功',
          icon: "success"
        })
      },
      fail: (res) => {
        // console.log('takeSnapshot fail', elementId, res)
        uni.showToast({
          icon: 'error',
          title: '截图失败'
        })
      }
    })
  }

  function takeViewSnapshot() {
    takeSnapshotForElement('snapshot-test-view', 'viewSnapshot')
  }

  function takeTextSnapshot() {
    takeSnapshotForElement('snapshot-test-text', 'textSnapshot')
  }

  function takeImageSnapshot() {
    takeSnapshotForElement('snapshot-test-image', 'imageSnapshot')
  }

  function takeScrollViewSnapshot() {
    takeSnapshotForElement('snapshot-test-scrollview', 'scrollViewSnapshot')
  }

  function takeCustomComponentSnapshot() {
    takeSnapshotForElement('snapshot-test-component', 'customComponentSnapshot')
  }

  defineExpose({
    data,
    snapshotData,
    takeSnapshotClick,
    takeViewSnapshot,
    takeTextSnapshot,
    takeImageSnapshot,
    takeScrollViewSnapshot,
    takeCustomComponentSnapshot
  })
</script>

<style>
  .section-divider {
    margin-top: 30px;
    height: 1px;
    background-color: #e0e0e0;
  }

  .section-title {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .test-group {
    margin: 20px;
    flex-direction: column;
  }

  .test-buttons {
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .btn-small {
    padding: 5px 15px;
    font-size: 13px;
    border-radius: 4px;
    flex: 1;
    margin: 0 5px;
  }

  .test-elements {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 20px;
  }

  .snapshot-test-small {
    width: 80%;
    height: 60px;
    background-color: dodgerblue;
  }

  .snapshot-test-text-small {
    width: 80%;
    padding: 8px;
    font-size: 14px;
    color: #fff;
    background-color: #ff6b6b;
  }

  .snapshot-test-image-small {
    width: 80%;
    height: 60px;
    background-color: #f0f0f0;
  }

  .snapshot-row {
    flex-direction: row;
    margin-top: 10px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;
  }

  .snapshot-data-col {
    flex: 1;
    flex-direction: column;
    margin: 0 5px;
    align-items: center;
  }

  .snapshot-data-subtitle {
    font-size: 13px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 5px;
  }

  .snapshot-preview {
    width: 100%;
    height: 120px;
    background-color: #fff;
    border-radius: 4px;
  }

  .snapshot-placeholder {
    font-size: 12px;
    color: #909399;
    padding: 20px 0;
  }

  .snapshot-original-image {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 90%;
  }

  .snapshot-result-image {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 90%;
  }

  .snapshot-placeholder-center {
    font-size: 12px;
    color: #909399;
    text-align: center;
    margin-top: 10px;
  }

  .snapshot-test-scrollview {
    margin-top: 15px;
    height: 120px;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
  }

  .scroll-content {
    height: 120px;
    padding: 10px;
    border: 1px solid #37b4ea;
    justify-content: center;
    align-items: center;
  }

  .scroll-text {
    line-height: 30px;
    font-size: 14px;
    color: #606266;
  }

  .snapshot-test-component {
    margin-top: 15px;
  }
</style>

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <view id="main" style="width: 100px;height: 100px; background-color: brown; transform: scale(1);"></view>

    <button @click="startAnimate">开始动画</button>
    <!-- #ifndef APP-HARMONY -->
    <!-- #ifndef MP-WEIXIN -->
    <button @click="pauseAnimate">暂停动画</button>
    <button @click="resumeAnimate">恢复动画</button>
    <!-- #endif -->
    <button @click="cancelAnimate">取消动画</button>
    <!-- #endif -->

    <image src="/static/test-image/logo.png" id="roll" style="width: 100px; height: 100px;margin: 10px;"></image>

    <!-- #ifndef APP-HARMONY -->
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改宽度</text>
     <view id="widthProperty" style="width: 100px;height: 100px;background-color: brown;" @click="widthProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改高度</text>
     <view id="height1" style="width: 100px;height: 100px;background-color: brown;" @click="heightProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改margin</text>
     <view id="marginProperty" style="width: 100px;height: 100px;background-color: brown;" @click="marginProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改padding</text>
     <view id="paddingProperty" style="width: 100px;height: 100px;background-color: brown;" @click="paddingProperty">
       <view style="width: 50px;height: 50px;background-color: black;"></view>
     </view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改border颜色</text>
     <view id="borderProperty"
       style="width: 100px;height: 100px;background-color: brown;border-width: 10px;border-color: black;border-style: solid;"
       @click="borderProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改transform</text>
     <view id="transformProperty" style="width: 100px;height: 100px;background-color: brown;" @click="transformProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改position</text>
     <view id="positionProperty" style="width: 100px;height: 100px;background-color: brown;" @click="positionProperty"></view>
   </view>
   <!-- #endif -->
   <!-- #ifndef MP-WEIXIN -->
   <!-- #ifndef APP-HARMONY -->
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改背景色和宽度</text>
     <view id="backgroundAndWidthProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundAndWidthProperty"></view>
   </view>
   <!-- #endif -->
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">执行的动画只有一个值1</text>
     <view id="oneProperty1" style="width: 100px;height: 100px;background-color: brown;" @click="oneProperty1"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">执行的动画只有一个值2</text>
     <view id="oneProperty2" style="width: 100px;height: 100px;background-color: brown;" @click="oneProperty2"></view>
   </view>
   <!-- #endif -->
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改背景色和margin-left(关键帧)</text>
     <view id="backgroundAndMarginLeftProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundAndMarginLeftProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改背景色和transform(关键帧)</text>
     <view id="backgroundAndTransformProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundAndTransformProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改背景色(关键帧)</text>
     <view id="backgroundProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundProperty"></view>
   </view>
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改opacity(关键帧)</text>
     <view id="opacityProperty" style="width: 100px;height: 100px;background-color: brown;" @click="opacityProperty"></view>
   </view>
   <!-- #ifndef APP-HARMONY -->
   <view
     style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
     <text style="margin-bottom: 4px;">修改border-color和margin-left(关键帧)</text>
     <view id="borderColorMarginLeftProperty" style="width: 100px;height: 100px;background-color: brown;border-width: 5px;border-style: solid;"
       @click="borderColorMarginLeftProperty"></view>
   </view>
   <!-- #endif -->
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  let mainView: UniElement | null = null
  let animation: UniAnimation | null = null

  function startAnimate() {
    animation = mainView!.animate([
      {
        transform: "scale(1)",
        transformOrigin: "0px 0px"
      },
      {
        transform: "scale(0)",
        transformOrigin: "50px 50px"
      },
      {
        transform: "scale(1)",
        transformOrigin: "100px 100px"
      }
    ], {
      duration: 5000,

    })
    animation!.oncancel = (_ : UniAnimationPlaybackEvent) => {
      uni.showToast({
        title: "动画被取消了"
      })
    }
    animation!.onfinish = (_ : UniAnimationPlaybackEvent) => {
      uni.showToast({
        title: "动画播放完成"
      })
    }
  }

  function pauseAnimate() {
    animation?.pause()
  }

  function resumeAnimate() {
    animation?.play()
  }

  function cancelAnimate() {
    animation?.cancel()
  }

  function widthProperty(e : UniPointerEvent) {
    e.currentTarget?.animate({
      width: ["100px", "200px", "100px"]
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function heightProperty(e : UniPointerEvent) {
    e.currentTarget?.animate({
      height: ["100px", "200px"]
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function marginProperty(e : UniPointerEvent) {
    e.currentTarget?.animate({
      margin: ["8px", "16px", "32px"]
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function paddingProperty(e : UniPointerEvent) {
    e.currentTarget?.animate({
      padding: ["0px", "16px", "32px", "0px"]
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function backgroundProperty(e : UniPointerEvent) {
    e.currentTarget?.animate([
      {
        offset: 0.3,
        backgroundColor: "yellow"
      },
      {
        offset: 0.6,
        backgroundColor: "red"
      },
      {
        backgroundColor: "blue"
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function borderProperty(e : UniPointerEvent) {
    e.currentTarget?.animate([
      {
        offset: 0.3,
        borderColor: "yellow"
      },
      {
        offset: 0.6,
        borderColor: "pink"
      },
      {
        borderColor: "blue"
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function transformProperty(e : UniPointerEvent) {
    e.currentTarget?.animate([
      {
        transform: "translateX(0px) scale(1) rotate(0deg)"
      },
      {
        transform: "translateX(100px)"
      },
      {
        transform: "scale(0.8) rotate(180deg)"
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function positionProperty(e : UniPointerEvent) {
    e.currentTarget?.animate({
      left: ["0px", "16px", "32px", "0px"]
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function backgroundAndWidthProperty(e : UniPointerEvent) {
    e.currentTarget?.animate({
      width: ["100px", "200px"],
      backgroundColor: ["red", "yellow", "blue"]
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function backgroundAndMarginLeftProperty(e : UniPointerEvent) {
    e.currentTarget?.animate([
      {
        offset: 0.2,
        backgroundColor: "red"
      }, {
        marginLeft: "10px"
      }, {
        marginLeft: "20px"
      }, {
        marginLeft: "30px",
        backgroundColor: "pink"
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function backgroundAndTransformProperty(e : UniPointerEvent) {
    e.currentTarget?.animate([
      {
        offset: 0.2,
        backgroundColor: "red"
      }, {
        transform: "translate(30px,0px)"
      }, {
        transform: "translate(50px,0px)"
      }, {
        transform: "translate(100px,0px)",
        backgroundColor: "pink"
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function oneProperty1(e : UniPointerEvent) {
    e.currentTarget?.animate({
      backgroundColor: "green"
    }, {
      duration: 1000,
      fill: "forwards"
    })
  }

  function oneProperty2(e : UniPointerEvent) {
    e.currentTarget?.animate([{
      backgroundColor: "blue"
    }], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function borderColorMarginLeftProperty(e : UniPointerEvent) {
    e.currentTarget?.animate([
      {
        borderColor: "red",
        marginLeft: "0px",
        offset: 0
      },
      {
        marginLeft: "20px",
        offset: 0.5
      },
      {
        marginLeft: "60px",
        borderColor: "yellow",
        offset: 1
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  function opacityProperty(e : UniPointerEvent){
    e.currentTarget?.animate([
      {
        offset: 0.3,
        opacity: "1"
      },
      {
        offset: 0.6,
        opacity: "0.1"
      },
      {
        opacity: "1"
      }
    ], {
      duration: 1000,
      fill: "forwards"
    })
  }

  onReady(() => {
    mainView = uni.getElementById("main")
    var roll = uni.getElementById("roll")
    roll!.animate([
      { transform: "translateX(0) rotate(0)" },
      { transform: "translateX(200px) rotate(540deg)" },
    ],
      {
        duration: 2000,
        direction: "alternate",
        easing: "ease-in-out",
        iterations: Infinity,
      },
    )
  })
</script>

<style>
  .view-margin {
    margin: 8px;
  }
</style>

<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 setup lang="uts">
  
  import { ItemType } from '@/components/enum-data/enum-data-types';

  const orientation_enum = ref([{ "value": 0, "name": "auto" }, { "value": 1, "name": "landscape" }, { "value": 2, "name": "landscape-primary" }, { "value": 3, "name": "landscape-secondary" }, { "value": 4, "name": "portrait" }] as ItemType[])
  const navigationUI_enum = ref([{ "value": 0, "name": "auto" }, { "value": 1, "name": "hide" }, { "value": 2, "name": "show" }] as ItemType[])
  const text = ref("点击进入全屏")
  let fullscreenElement: UniElement | null = null
  let isFullscreen = false
  const orientation = ref("landscape")
  const navigationUI = ref("hide")

  type DataType = {
    fullscreenchangeCount: number,
    requestFullscreenCallbackStatus: boolean,
    exitFullscreenCallbackStatus: boolean,
  }

  const data = reactive({
    fullscreenchangeCount: 0,
    requestFullscreenCallbackStatus: false,
    exitFullscreenCallbackStatus: false,
  } as DataType)

  function getCurrentPage() : UniPage {
    const pages = getCurrentPages()
    return pages[pages.length - 1]
  }

  function fullscreen() {
    if (isFullscreen) {
      // 重置退出全屏回调状态
      let status1 = false
      const page = getCurrentPage()
      page.exitFullscreen({
        success: () => {
          text.value = "点击进入全屏"
          status1 = true
        },
        fail: (err) => {
          console.log('fail', err)
          status1 = false
        },
        complete: () => {
          console.log('complete')
          data.exitFullscreenCallbackStatus = status1
        }
      })
    } else {
      // 重置进入全屏回调状态
      let status1 = false
      fullscreenElement?.requestFullscreen({
        navigationUI: navigationUI.value,
        orientation: orientation.value,
        success: () => {
          text.value = "点击退出全屏"
          status1 = true
        },
        fail: (err) => {
          console.log('fail', err)
          status1 = false
        },
        complete: () => {
          console.log('complete')
          data.requestFullscreenCallbackStatus = status1
        }
      })
    }

    isFullscreen = !isFullscreen
  }

  function fullscreenchange(e : UniEvent) {
    console.log(e.type)
    data.fullscreenchangeCount++
    console.log(data.fullscreenchangeCount)
  }

  function fullscreenerror(e : UniEvent) {
    console.log(e.type)
  }

  function radio_change_orientation(checked : number) {
    console.log(checked)
    orientation.value = orientation_enum.value[checked]['name'] as string
  }

  function radio_change_ui(checked : number) {
    console.log(checked)
    navigationUI.value = navigationUI_enum.value[checked]['name'] as string
  }

  onReady(() => {
    fullscreenElement = uni.getElementById('fullscreen') as UniElement
  })

  defineExpose({
    data,
    fullscreen
  })
</script>

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

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