useMenuButtonBoundingClientRect

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

何时使用

需要获取菜单按钮布局信息判断

API

const rect = useMenuButtonBoundingClientRect();

参数说明

无

返回值说明

返回值	说明	类型
rect	布局位置信息	Rect

Rect

返回值	说明	类型
bottom	下边界坐标，单位：px	number
height	高度，单位：px	number
left	左边界坐标，单位：px	number
right	右边界坐标，单位：px	number
top	上边界坐标，单位：px	number
width	宽度，单位：px	number

代码演示

React

wechat/useMenuButtonBoundingClientRect/index

import React from 'react';
import { useMenuButtonBoundingClientRect } from 'taro-hooks';

import DemoContent from '@src/components/DemoContent';
import { Cell } from '@taroify/core';

export default () => {
  const rect = useMenuButtonBoundingClientRect();

  return (
    <DemoContent>
      {Object.keys(rect).length ? (
        <Cell.Group clickable>
          {Object.entries(rect).map(([key, value]) => (
            <Cell key={key} title={'位置 - ' + key}>
              {value}
            </Cell>
          ))}
        </Cell.Group>
      ) : (
        <Cell>暂无信息</Cell>
      )}
    </DemoContent>
  );
};

Vue

wechat/useMenuButtonBoundingClientRect/index

<template>
  <demo-content>
    <nut-cell v-if="!emptyInfo">暂无信息</nut-cell>
    <nut-cell-group v-else>
      <nut-cell
        v-for="(value, key) in rect"
        :key="key"
        :title="'位置 - ' + key"
        :desc="$filters.stringify(value)"
      ></nut-cell>
    </nut-cell-group>
  </demo-content>
</template>

<script setup lang="ts">
import { useMenuButtonBoundingClientRect } from 'taro-hooks';

const rect = useMenuButtonBoundingClientRect();

const emptyInfo = Object.keys(rect)?.length;
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️