designer-hub/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',
  marginLeft: '0px',
})
// 获取小程序胶囊距离
onMounted(async () => {
  const { windowHeight, windowWidth } = await uni.getSystemInfo()
  //   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',
    marginLeft: `${windowWidth - menuBtnClientRect.value.right}px`,
  }
  //   console.log(startMenuBtnStyle.value)
  // #endif
})
</script>
<template>
  <div>
    <div :style="{ height: menuBtnClientRect.top + 'px' }"></div>
    <div class="bg-red rounded-full flex items-center px-3 box-border" :style="startMenuBtnStyle">
      扫一扫
    </div>
  </div>
</template>