From 137be6d79e9ddee450db771aa57c20dec85a01f7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 21 Oct 2021 20:59:13 +0800
Subject: [PATCH] docs(NavBar): improve demo (#9708)

---
 packages/vant/src/nav-bar/README.md           | 30 ++++++++++++++-
 packages/vant/src/nav-bar/README.zh-CN.md     | 38 ++++++++++++++++++-
 packages/vant/src/nav-bar/demo/index.vue      | 17 +++++++++
 .../test/__snapshots__/demo.spec.ts.snap      | 25 ++++++++++++
 4 files changed, 107 insertions(+), 3 deletions(-)

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
+<van-nav-bar title="Title" />
+```
+
+### Back
+
+```html
+<van-nav-bar
+  title="Title"
+  left-text="Back"
+  left-arrow
+  @click-left="onClickLeft"
+/>
+```
+
+```js
+export default {
+  setup() {
+    const onClickLeft = () => history.back();
+    return {
+      onClickLeft,
+    };
+  },
+};
+```
+
+### Right Button
+
 ```html
 <van-nav-bar
   title="Title"
@@ -36,7 +64,7 @@ import { Toast } from 'vant';
 
 export default {
   setup() {
-    const onClickLeft = () => 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
+<van-nav-bar title="标题" />
+```
+
+### 返回上级
+
+在导航栏实现返回上级功能。
+
+```html
+<van-nav-bar
+  title="标题"
+  left-text="返回"
+  left-arrow
+  @click-left="onClickLeft"
+/>
+```
+
+```js
+export default {
+  setup() {
+    const onClickLeft = () => history.back();
+    return {
+      onClickLeft,
+    };
+  },
+};
+```
+
+### 右侧按钮
+
+在导航栏右侧添加可点击的按钮。
+
 ```html
 <van-nav-bar
   title="标题"
@@ -36,7 +70,7 @@ import { Toast } from 'vant';
 
 export default {
   setup() {
-    const onClickLeft = () => Toast('返回');
+    const onClickLeft = () => history.back();
     const onClickRight = () => Toast('按钮');
     return {
       onClickLeft,
@@ -48,7 +82,7 @@ export default {
 
 ### 使用插槽
 
-通过插槽自定义导航栏两侧的内容。
+可以通过插槽自定义导航栏两侧的内容。
 
 ```html
 <van-nav-bar title="标题" left-text="返回" left-arrow>
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'));
 
 <template>
   <demo-block :title="t('basicUsage')">
+    <van-nav-bar :title="t('title')" />
+  </demo-block>
+
+  <demo-block :title="t('showBack')">
+    <van-nav-bar
+      :title="t('title')"
+      :left-text="t('back')"
+      left-arrow
+      @click-right="onClickRight"
+    />
+  </demo-block>
+
+  <demo-block :title="t('rightButton')">
     <van-nav-bar
       :title="t('title')"
       :left-text="t('back')"
diff --git a/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap
index 7f35b69a2..70048081d 100644
--- a/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap
@@ -1,6 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-nav-bar van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__title van-ellipsis">
+        Title
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-nav-bar van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left">
+        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
+        </i>
+        <span class="van-nav-bar__text">
+          Back
+        </span>
+      </div>
+      <div class="van-nav-bar__title van-ellipsis">
+        Title
+      </div>
+    </div>
+  </div>
+</div>
 <div>
   <div class="van-nav-bar van-hairline--bottom">
     <div class="van-nav-bar__content">