Merge pull request #3128 from Lindysen/feat/nav_bar_custom_style

feat(NavBar): support custom-style

packages/nav-bar/README.md

@@ -60,6 +60,7 @@ Page({
 | placeholder | 固定在顶部时是否开启占位 | _boolean_ | `false` | - |
 | border | 是否显示下边框 | _boolean_ | `true` | - |
 | z-index | 元素 z-index | _number_ | `1` | - |
+| custom-style | 自定义样式 | _string_ | - | - |
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `true` | - |
 
 ### Slot

packages/nav-bar/index.ts

@@ -15,6 +15,7 @@ VantComponent({
     },
     leftText: String,
     rightText: String,
+    customStyle: String,
     leftArrow: Boolean,
     border: {
       type: Boolean,
@@ -33,13 +34,18 @@ VantComponent({
   data: {
     statusBarHeight: 0,
     height: 44,
+    baseStyle: '',
   },
 
   created() {
     const { statusBarHeight } = wx.getSystemInfoSync();
+    const { safeAreaInsetTop, zIndex } = this.data;
+    const paddingTop = safeAreaInsetTop ? statusBarHeight : 0;
+    const baseStyle = `z-index: ${zIndex};padding-top: ${paddingTop}px;`;
     this.setData({
       statusBarHeight,
       height: 44 + statusBarHeight,
+      baseStyle
     });
   },
 

packages/nav-bar/index.wxml

@@ -4,7 +4,7 @@
 
 <view
   class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"
+  style="{{ baseStyle }} {{ customStyle }}"
 >
   <view class="van-nav-bar__left" bind:tap="onClickLeft">
     <block wx:if="{{ leftArrow || leftText }}">