Vue3+Taro封装的顶部Tab

<template>
  <view class="nav_custom_bar" :style="{ height: `${navBarHeight}rpx` }">
    <image
      class="nav_custom_bar_back"
      src="../../other/dinner/fanhui.png"
      @tap="goBackPage"
      v-if="needBackIcon!=false"
    />
    <text class="nav_custom_bar_title" :style="{color:textColor?textColor:'black'}">{{ mainTitle }}</text>
    <view></view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import { ref } from "vue";
import "./index.less";
export default {
     // 是否展示返回箭头    主标题     标题颜色
  props: ["needBackIcon", "mainTitle","textColor"],
  setup(props, content) {
    let mainTitle = ref("");
    mainTitle.value = props.mainTitle;
    // 获取标题框总高度
    let navBarHeight = ref(0);
    // 是否显示返回图标
    let needBackIcon = ref(true);
    needBackIcon.value = props.needBackIcon;
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    var sysinfo = Taro.getSystemInfoSync();
    let statusBarHeight = sysinfo.statusBarHeight;
    let menuBottonHeight = menuButtonObject.height;
    let menuBottonTop = menuButtonObject.top;
    let navBarHeights =
      statusBarHeight +
      menuBottonHeight +
      (menuBottonTop - statusBarHeight) * 2;
    navBarHeight.value = navBarHeights * 2;
    Taro.setStorageSync("navBarHeight", navBarHeight.value);
    const goBackPage = () => {
      Taro.navigateBack({
        delta: 1,
      });
    };
    return {
      navBarHeight,
      goBackPage,
      needBackIcon,
      mainTitle,
    };
  }
};
</script>