From 03aef579ad4c01294bb2f50388cedc06e0b227f9 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 27 Nov 2017 10:52:26 +0800
Subject: [PATCH] [bugfix] NavBar click event (#354)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot

* [new feature] ImagePreview support manually close

* fix: ImagePreview test case

* [Doc] add switch lang button in mobile

* [bugfix] Popup overlay style update

* [bugfix] NavBar click event
---
 docs/demos/views/nav-bar.vue   | 15 +++++++++++++++
 docs/markdown/en-US/nav-bar.md | 24 +++++++++++++++++++++++-
 docs/markdown/zh-CN/nav-bar.md | 24 +++++++++++++++++++++++-
 packages/nav-bar/index.vue     |  4 ++--
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/docs/demos/views/nav-bar.vue b/docs/demos/views/nav-bar.vue
index adc2f58f5..c2ebc4100 100644
--- a/docs/demos/views/nav-bar.vue
+++ b/docs/demos/views/nav-bar.vue
@@ -6,6 +6,8 @@
         :leftText="$t('back')"
         :rightText="$t('button')"
         leftArrow
+        @click-left="onClickLeft"
+        @click-right="onClickRight"
       />
     </demo-block>
 
@@ -16,3 +18,16 @@
     </demo-block>
   </demo-section>
 </template>
+
+<script>
+export default {
+  methods: {
+    onClickLeft() {
+      Toast(this.$t('back'));
+    },
+    onClickRight() {
+      Toast(this.$t('button'));
+    }
+  }
+}
+</script>
diff --git a/docs/markdown/en-US/nav-bar.md b/docs/markdown/en-US/nav-bar.md
index 27425dd40..ed1fc1bb7 100644
--- a/docs/markdown/en-US/nav-bar.md
+++ b/docs/markdown/en-US/nav-bar.md
@@ -17,9 +17,24 @@ Vue.component(NavBar.name, NavBar);
   leftText="Back"
   rightText="Button"
   leftArrow
+  @click-left="onClickLeft"
+  @click-right="onClickRight"
 />
 ```
 
+```js
+export default {
+  methods: {
+    onClickLeft() {
+      Toast('Back');
+    },
+    onClickRight() {
+      Toast('Button');
+    }
+  }
+}
+```
+
 #### Advanced Usage
 
 ```html
@@ -44,4 +59,11 @@ Vue.component(NavBar.name, NavBar);
 |-----------|-----------|
 | title | Custom title |
 | left | Custom left side content |
-| right | Custom right side content |
\ No newline at end of file
+| right | Custom right side content |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click-left | Triggered when click left button | - |
+| click-right | Triggered when click right button | - |
\ No newline at end of file
diff --git a/docs/markdown/zh-CN/nav-bar.md b/docs/markdown/zh-CN/nav-bar.md
index ae5c48fea..4e8a8dd4f 100644
--- a/docs/markdown/zh-CN/nav-bar.md
+++ b/docs/markdown/zh-CN/nav-bar.md
@@ -17,9 +17,24 @@ Vue.component(NavBar.name, NavBar);
   leftText="返回"
   rightText="按钮"
   leftArrow
+  @click-left="onClickLeft"
+  @click-right="onClickRight"
 />
 ```
 
+```js
+export default {
+  methods: {
+    onClickLeft() {
+      Toast('返回');
+    },
+    onClickRight() {
+      Toast('按钮');
+    }
+  }
+}
+```
+
 #### 高级用法
 通过 slot 定制内容
 
@@ -45,4 +60,11 @@ Vue.component(NavBar.name, NavBar);
 |-----------|-----------|
 | title | 自定义标题 |
 | left | 自定义左侧区域内容 |
-| right | 自定义右侧区域内容 |
\ No newline at end of file
+| right | 自定义右侧区域内容 |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| click-left | 点击左侧按钮时触发 | - |
+| click-right | 点击右侧按钮时触发 | - |
diff --git a/packages/nav-bar/index.vue b/packages/nav-bar/index.vue
index cb2e99e17..09789dbc5 100644
--- a/packages/nav-bar/index.vue
+++ b/packages/nav-bar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="van-nav-bar van-hairline--top-bottom" :class="{ 'van-nav-bar--fixed': fixed }">
-    <div class="van-nav-bar__left" @click="$emit('clickLeft')">
+    <div class="van-nav-bar__left" @click="$emit('click-left')">
       <slot name="left">
         <van-icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />
         <span v-if="leftText" v-text="leftText" class="van-nav-bar__text" />
@@ -9,7 +9,7 @@
     <div class="van-nav-bar__title">
       <slot name="title">{{ title }}</slot>
     </div>
-    <div class="van-nav-bar__right" @click="$emit('clickRight')">
+    <div class="van-nav-bar__right" @click="$emit('click-right')">
       <slot name="right">
         <span v-if="rightText" v-text="rightText" class="van-nav-bar__text" />
       </slot>