vue3.0 + ts + vite 创建的ui-app项目，自定义标题

使用 vue3.0 + ts + vite 创建的ui-app项目，开发小程序，自定义封装一个标题组件

html 部分

<template>
    <view>
        <view :style="{height: data.statusBarHeight + 'px', lineHeight: data.statusBarHeight + 'px', backgroundColor: backgroundColor}"></view>
        <view :style="{height: data.navHeight + 'px', lineHeight: data.navHeight + 10 + 'px', backgroundColor: backgroundColor,
            color: color, textAlign: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 20rpx'}"
        >
            <view class="home" @click="navLeftClick">
                <van-icon v-if="leftIcon" :name="leftIcon" size="36rpx" />
                <slot name="leftIcon"></slot>
            </view>
            <view style="font-size: 14px;" @click="navTitleClick">
                <text v-if="titType">{
   
   {data.title}}</text>
                <slot name="title"></slot>
            </view>
            <view style="width: 58rpx;" @click="navRightClick">
                <van-icon v-if="rightIcon" :name="rightIcon" size="36rpx" />
                <slot name="rightIcon"></slot>
            </view>
        </view>
    </view>
</template>

script 部分

<script setup lang="ts">
import {
    
     reactive } from "vue";
// 接收父组件参数
const props = defineProps({
    
    
    // 左侧图标
    leftIcon: {
    
    
        type: String || null,
        default: null
    },
    // 是否显示标题
    titType: {
    
    
        type: Boolean,
        default: true
    },
    // 中间标题
    title: {
    
    
        type: String || null,
        default: null
    },
    // 右侧图标
    rightIcon: {
    
    
        type: String || null,
        default: null
    },
    // 字体颜色
    color: {
    
    
        type: String,
        default: '#000'
    },
    // 导航背景色
    backgroundColor: {
    
    
        type: String,
        default: '#FFFFFF'
    },
});

const data = reactive({
    
    
    // 标题内容
    title: <String | null> null,
    // 头部导航高度
    navHeight: 0,
    // 状态栏高度
    statusBarHeight: 0,
});

// 设置标题， __wxConfig.global.window.navigationBarTitleText 微信小程序获取项目标题
props.title ? data.title = props.title : data.title = __wxConfig.global.window.navigationBarTitleText;


// 获取当前原头部导航的高度进行赋值
let _windowInfo = wx.getWindowInfo();
let _menuInfo = wx.getMenuButtonBoundingClientRect();
data.statusBarHeight = _windowInfo.statusBarHeight;
data.navHeight = (_menuInfo.top - _windowInfo.statusBarHeight) * 2 + _menuInfo.height;


// 跳转事件注册
const emit = defineEmits(["navLeftClick", "navTitleClick", "navRightClick"]);

// 左侧图标点击事件
const navLeftClick = () => emit("navLeftClick");
// 中间标题点击事件
const navTitleClick = () => emit("navTitleClick");
// 右侧图标点击事件
const navRightClick = () => emit("navRightClick");

</script>

style 部分

<style lang="scss" scoped>
.home {
    
    
    width: 58rpx;
    height: 58rpx;
    display: flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
}
</style>