designer-hub/packages/merchant/src/components/start-menu-button.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
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',
})
// 获取小程序胶囊距离
onMounted(async () => {
  const { windowWidth } = await uni.getWindowInfo()
  //   console.log(windowHeight, windowWidth)
  // #ifdef MP-WEIXIN
  menuBtnClientRect.value = await uni.getMenuButtonBoundingClientRect()
  //   console.log(menuBtnClientRect.value)
  startMenuBtnStyle.value = {
    width: menuBtnClientRect.value.width + 'px',
    height: menuBtnClientRect.value.height + 'px',
    top: `${menuBtnClientRect.value.top}px`,
    left: `${windowWidth - menuBtnClientRect.value.right}px`,
  }
  //   console.log(startMenuBtnStyle.value)
  // #endif
})
</script>
<template>
  <div>
    <!-- <div :style="{ height: menuBtnClientRect.top + 'px' }"></div> -->
    <div
      class="fixed rounded-full flex items-center px-3 box-border bg-green z-1"
      :style="startMenuBtnStyle"
    >
      <slot></slot>
    </div>
  </div>
</template>