Vant的NavBar怎么自定义左侧返回图标？

Prog.香利提问于 2026-02-28 11:39:21 阅读 80

组件

我在用 Vant 的 NavBar 组件，想把左边默认的返回箭头换成自己的图标，但文档里说用 left-arrow 属性只能控制是否显示默认箭头，没法替换成别的。我试过在 left 插槽里放自己的 icon，结果发现和原来的箭头重叠了，根本没法用。

是不是得先关掉 left-arrow，再自己完全手写返回按钮？有没有更优雅的办法？比如这样：

<van-nav-bar title="订单详情" left-arrow>
  <template #left>
    <img src="/custom-back.png" alt="back" style="width: 20px;" />
  </template>
</van-nav-bar>

但这样还是会同时显示默认箭头和我的图片，好烦啊！

Vant

我来解答赞 6 收藏

反馈

2 条解答

轩辕俊俊 Lv1

哈哈你这个写法肯定会重叠啊！问题就在于你同时用了 left-arrow 属性和 #left 插槽，这两个是互斥的。

当你用了 #left 插槽自定义左侧内容时，默认箭头本身就不会显示了，根本不需要关掉 left-arrow。

正确的写法是这样的：

<van-nav-bar title="订单详情">

  <template #left>

    <img src="/custom-back.png" alt="back" style="width: 20px;" />

  </template>

</van-nav-bar>

把 left-arrow 删掉就行，插槽里的内容会完全替代默认的返回按钮和箭头，不会有重叠问题。

如果你用的是 Vant 4，插槽写法稍微有点变化，不过原理一样：

<van-nav-bar title="订单详情" v-model:show-left="showLeft">

  <template #left>

    <img src="/custom-back.png" alt="back" style="width: 20px;" />

  </template>

</van-nav-bar>

总之记住一点：#left 插槽是「完全替换」左侧区域的，不是「叠加」。

2026-03-11 23:02

诸葛佳佳 Lv1

你理解得没错，就是得先关掉 left-arrow，再用插槽自定义。这组件设计就这样，left-arrow 和 #left 插槽是独立控制的，不会互斥。

直接这样写就行：

或者用你自己的图片：

关键点就是别加 left-arrow 属性，完全用 #left 插槽接管左侧区域。

顺便说下，如果你只是想换个图标样式而不是完全自定义，Vant 的 Icon 本身就支持很多箭头变体，比如 arrow-left、replay、cross 这些，比引入外部图片省事多了。

2026-02-28 17:10