vue3自定义组件封装app端（我的成长之路No.5）

vue3的移动端相关自定义组件的封装案例，以备未来不时之需。

<template>
    <van-nav-bar safe-area-inset-top :="props" >
        <template #title>
            <slot name="title">
                <div class="title">
                    <span>{{ title }}</span>
                </div>
            </slot>
        </template>
        <template #left>
            <div class="left">
                <i :class="['mapp', 'my_icon', icon]" @click="goBack"></i>
                <div class="leftFont">
                    <slot name="left">
                        <span>{{ leftText }}</span>
                    </slot>
                </div>
            </div>
        </template>
        <template #right>
            <slot name="right"> //具名插槽

            </slot>
        </template>
    </van-nav-bar>
</template>

<script setup>//setup提升
const props = defineProps({ // 对象形式声明 key value
    title: {
        type: String,// 如果可能存在多个类型，则可以写成 [String,Number]
        default: '' //默认值
        required:true // 是否必传 ，在不声明为true 的情况下，所有prop 默认为非必填。
    },
    leftText: {
        type: String,
        default: ''
    },
    rightText: {
        type: String,
        default: ''
    },
    leftArrow: {
        type: Boolean,
        default: true
    },
    icon: {
        type: String,
        default: 'mapp-xiangzuo'
    },
    iconColor: {
        type: String,
        default: 'white'
    }
})
const emits = defineEmits(); //子组件 自定义事件
// 左侧按钮事件
function goBack() {
    emits('goBack');
}
</script>

<style scoped>
.my_icon {
    color: v-bind(props.iconColor);
    font-size: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title {
    font-size: 32px;
    font-weight: 400;
    color: white;
    font-family: Microsoft YaHei;
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* margin-left: 30px; */
}

.left {
    display: flex;
    justify-content: space-between;
}

.van-nav-bar {
    height: 88px;
    background: #166ce9;
}

.leftFont {
    color: white;
    margin-left: 10px;
    font-size: 32px;
}

:deep(.van-nav-bar__content) {//强制绑定
    height: 100%;
}
:deep(.van-nav-bar__title){
    width: 50%;
}
</style>