<template>
  <view
    class="custom-title"
    :style="`padding-top:${capsuleRect.top}px;height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;${props?.objStyle}`"
  >
    {{ titleValue || '标题' }}
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
const titleValue = ref<string>('标题')
const capsuleRect = ref<any>({})
const props = defineProps(['title', 'objStyle'])
watch(
  () => props.title,
  newVal => {
    titleValue.value = newVal
    console.log(newVal, 'title')
  }
)
onMounted(() => {
  titleValue.value = props.title
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
  console.log(capsuleRect.value, 'capsuleRect')
})
</script>
<style lang="scss" scoped>
.custom-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
