fix(nav-bar): fix style error with no left-text (#3263)

fix #3250

example/pages/nav-bar/index.wxml

@@ -1,7 +1,6 @@
 <demo-block title="基础用法">
   <van-nav-bar
     title="标题"
-    left-text="返回"
     right-text="按钮"
     left-arrow
     bind:click-left="onClickLeft"
@@ -11,6 +10,6 @@
 
 <demo-block title="高级用法">
   <van-nav-bar title="标题" left-text="返回" left-arrow>
-    <van-icon name="search" slot="right" custom-class="icon" />
+    <van-icon name="search" slot="right" custom-class="icon" size="18" />
   </van-nav-bar>
 </demo-block>

example/project.config.json

@@ -23,7 +23,7 @@
 			"disablePlugins": [],
 			"outputPath": ""
 		},
-		"useCompilerModule": false,
+		"useCompilerModule": true,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",

packages/nav-bar/index.less

@@ -9,6 +9,10 @@
   .theme(line-height, '@nav-bar-height');
   .theme(background-color, '@nav-bar-background-color');
 
+  &__content {
+    position: relative;
+  }
+
   &__text {
     display: inline-block;
     vertical-align: middle;
@@ -50,6 +54,7 @@
   &__left,
   &__right {
     position: absolute;
+    top: 0;
     bottom: 0;
     display: flex;
     align-items: center;

packages/nav-bar/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { getSystemInfoSync } from '../common/utils';
 
 VantComponent({
   classes: ['title-class'],
@@ -38,14 +39,14 @@ VantComponent({
   },
 
   created() {
-    const { statusBarHeight } = wx.getSystemInfoSync();
+    const { statusBarHeight } = 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
+      baseStyle,
     });
   },
 

packages/nav-bar/index.wxml

@@ -4,8 +4,9 @@
 
 <view
   class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="{{ baseStyle }} {{ customStyle }}"
+  style="{{ baseStyle }}"
 >
+  <view class="van-nav-bar__content" style="{{ customStyle }}">
     <view class="van-nav-bar__left" bind:tap="onClickLeft">
       <block wx:if="{{ leftArrow || leftText }}">
         <van-icon
@@ -37,3 +38,4 @@
       <slot wx:else name="right" />
     </view>
   </view>
+</view>