docs(NavBar): improve demo (#9708)

2021-10-21 20:59:13 +08:00
parent 850aedd864
commit 137be6d79e
4 changed files with 107 additions and 3 deletions
@@ -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>