Vant的NavBar怎么自定义左侧图标和文字？

Mr-冬冬提问于 2026-02-24 02:37:19 阅读 27

组件

我在用 Vant 的 NavBar 组件，想把左边的返回箭头换成自定义图标，同时显示“首页”文字，但试了文档里的 left-text 和 left-arrow 属性，只能显示默认的箭头或者纯文字，没法同时自定义图标和文字。有没有办法实现？

我现在的代码是这样的：

<van-nav-bar
  title="我的页面"
  left-text="首页"
  left-arrow
  @click-left="onClickLeft"
/>

Vant

我来解答赞 6 收藏

反馈

2 条解答

一茹🍀 Lv1

省事的话直接用插槽，别折腾那俩属性了：

<van-nav-bar

  title="我的页面"

  @click-left="onClickLeft"

>

  <template #left>

    <div class="nav-left">

      <van-icon name="home" />

      <span>首页</span>

    </div>

  </template>

</van-nav-bar>

记得加点样式对齐下，比如 .nav-left { display: flex; align-items: center; gap: 4px; } 就行了

2026-02-26 20:01

设计师光远 Lv1

我一般直接用插槽自己写左边内容，别用那俩属性了，代码这么写：

2026-02-24 03:01