[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

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

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
@@ -45,3 +60,10 @@ Vue.component(NavBar.name, NavBar);
 | title | Custom title |
 | left | Custom left side content |
 | right | Custom right side content |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click-left | Triggered when click left button | - |
+| click-right | Triggered when click right button | - |

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 定制内容
 
@@ -46,3 +61,10 @@ Vue.component(NavBar.name, NavBar);
 | title | 自定义标题 |
 | left | 自定义左侧区域内容 |
 | right | 自定义右侧区域内容 |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| click-left | 点击左侧按钮时触发 | - |
+| click-right | 点击右侧按钮时触发 | - |

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>