diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md
index ee33eac01..096dfe6d8 100644
--- a/packages/vant/src/nav-bar/README.md
+++ b/packages/vant/src/nav-bar/README.md
@@ -20,6 +20,34 @@ app.use(NavBar);
### Basic Usage
+```html
+
+```
+
+### Back
+
+```html
+
+```
+
+```js
+export default {
+ setup() {
+ const onClickLeft = () => history.back();
+ return {
+ onClickLeft,
+ };
+ },
+};
+```
+
+### Right Button
+
```html
Toast('Back');
+ const onClickLeft = () => history.back();
const onClickRight = () => Toast('Button');
return {
onClickLeft,
diff --git a/packages/vant/src/nav-bar/README.zh-CN.md b/packages/vant/src/nav-bar/README.zh-CN.md
index 804e55a80..d8cdc6331 100644
--- a/packages/vant/src/nav-bar/README.zh-CN.md
+++ b/packages/vant/src/nav-bar/README.zh-CN.md
@@ -20,6 +20,40 @@ app.use(NavBar);
### 基础用法
+通过 `title` 属性设置导航栏标题。
+
+```html
+
+```
+
+### 返回上级
+
+在导航栏实现返回上级功能。
+
+```html
+
+```
+
+```js
+export default {
+ setup() {
+ const onClickLeft = () => history.back();
+ return {
+ onClickLeft,
+ };
+ },
+};
+```
+
+### 右侧按钮
+
+在导航栏右侧添加可点击的按钮。
+
```html
Toast('返回');
+ const onClickLeft = () => history.back();
const onClickRight = () => Toast('按钮');
return {
onClickLeft,
@@ -48,7 +82,7 @@ export default {
### 使用插槽
-通过插槽自定义导航栏两侧的内容。
+可以通过插槽自定义导航栏两侧的内容。
```html
diff --git a/packages/vant/src/nav-bar/demo/index.vue b/packages/vant/src/nav-bar/demo/index.vue
index 38b7b2e11..2dfba2dad 100644
--- a/packages/vant/src/nav-bar/demo/index.vue
+++ b/packages/vant/src/nav-bar/demo/index.vue
@@ -7,9 +7,13 @@ import { Toast } from '../../toast';
const t = useTranslate({
'zh-CN': {
useSlot: '使用插槽',
+ showBack: '返回上级',
+ rightButton: '右侧按钮',
},
'en-US': {
useSlot: 'Use Slot',
+ showBack: 'Back',
+ rightButton: 'Right Button',
},
});
@@ -19,6 +23,19 @@ const onClickRight = () => Toast(t('button'));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Back
+
+
+
+ Title
+
+
+
+