docs(NavBar): improve demo (#9708)

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,

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>

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')"

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">