vue3 vant4 NavBar 导航栏封装公共组件

vue3 vant4 NavBar 导航栏封装公共组件

只做左侧公共封装，标题，右边需求不同，根据情况填充

<template>
  <div class="customNavBar">
    <van-nav-bar :left-text=leftTetx fixed :border=false left-arrow @click-left="onClickLeft">
      <template #right>
        <slot name="rightContent"></slot>
      </template>
      <template #title>
        <slot name="titleContent"></slot>
      </template>

    </van-nav-bar>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { defineProps } from 'vue';
import { NavBar,}from 'vant';
const router = useRouter();

const props = defineProps({
  leftTetx: {
    type: String,
    default: false,
  },
});


const onClickLeft = () => {
  router.push('/');
}
</script>
<style lang="less" scoped>
.customNavBar {
  :deep .van-nav-bar {
    background-color: #192DB7;
    padding-top: 2rem;
  }

  :deep .van-nav-bar .van-icon {
    color: #FFFFFF;
    font-size: 1.5rem;
    margin-right: 1.5rem;

  }

  :deep .van-nav-bar__text {
    color: #FFFFFF;
    font-size: 2rem;
  }
}
</style>

在外部调用组件时候

 <div class="headerNavBar">
        <customNavBar :leftTetx = state.leftTetx>
          <template #rightContent>
            <!-- 在这里放置标题右侧内容 -->
            <div class="right-icons">
              <van-icon name="search" />
              <van-icon name="setting-o" />
            </div>
          </template>
        </customNavBar>
</div>

别忘记声明leftTetx值