designer-hub/packages/app/src/layouts/back.vue

<script lang="ts" setup>
import { defaultThemeVars } from '../core/themes/default'
import { ref } from 'vue'

const slots = useSlots()
const childRef = ref()
const reference = ref()
const menuBtnClientRect = ref<UniNamespace.GetMenuButtonBoundingClientRectRes>({
  width: 0,
  height: 0,
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
})
const startMenuBtnStyle = ref({
  width: '0px',
  height: '0px',
  left: '0px',
  top: '0px',
})
const navHeight = ref('0px')
onMounted(async () => {
  menuBtnClientRect.value = await uni.getMenuButtonBoundingClientRect()
  const { windowWidth } = await uni.getWindowInfo()
  startMenuBtnStyle.value = {
    width: menuBtnClientRect.value.width + 'px',
    height: menuBtnClientRect.value.height + 'px',
    top: `${menuBtnClientRect.value.top}px`,
    left: `${windowWidth - menuBtnClientRect.value.right}px`,
  }
  navHeight.value = `${menuBtnClientRect.value.top + menuBtnClientRect.value.height + 8}px`
  console.log(menuBtnClientRect.value)
})
const handleBack = () => {
  uni.navigateBack()
}
</script>
<template>
  <wd-config-provider
    class="flex-grow flex flex-col"
    custom-class="flex-grow"
    :themeVars="defaultThemeVars"
  >
    <view class="bg-[#f6f6f6] flex-grow flex flex-col">
      <div v-if="childRef?.navBarFixed ?? false" class="" :style="{ height: navHeight }"></div>
      <div
        class="fixed rounded-full flex items-center justify-start px-3 box-border z-1"
        :style="startMenuBtnStyle"
      >
        <wd-button
          type="icon"
          size="small"
          icon="thin-arrow-left"
          custom-class="ml--3 text-white!"
          @click="handleBack"
        ></wd-button>
      </div>
      <!-- {{ slots }} -->
      <!-- <div ref="childRef"> -->
      {{ reference?.title }}
      <div ref="reference">
        <slot></slot>
      </div>
      <!-- </div> -->
    </view>
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>