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,36 +4,38 @@
 
 <view
   class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="{{ baseStyle }} {{ customStyle }}"
+  style="{{ baseStyle }}"
 >
-  <view class="van-nav-bar__left" bind:tap="onClickLeft">
-    <block wx:if="{{ leftArrow || leftText }}">
-      <van-icon
-        wx:if="{{ leftArrow }}"
-        size="16px"
-        name="arrow-left"
-        custom-class="van-nav-bar__arrow"
-      />
+  <view class="van-nav-bar__content" style="{{ customStyle }}">
+    <view class="van-nav-bar__left" bind:tap="onClickLeft">
+      <block wx:if="{{ leftArrow || leftText }}">
+        <van-icon
+          wx:if="{{ leftArrow }}"
+          size="16px"
+          name="arrow-left"
+          custom-class="van-nav-bar__arrow"
+        />
+        <view
+          wx:if="{{ leftText }}"
+          class="van-nav-bar__text"
+          hover-class="van-nav-bar__text--hover"
+          hover-stay-time="70"
+        >{{ leftText }}</view>
+      </block>
+      <slot wx:else name="left" />
+    </view>
+    <view class="van-nav-bar__title title-class van-ellipsis">
+      <block wx:if="{{ title }}">{{ title }}</block>
+      <slot wx:else name="title" />
+    </view>
+    <view class="van-nav-bar__right" bind:tap="onClickRight">
       <view
-        wx:if="{{ leftText }}"
+        wx:if="{{ rightText }}"
         class="van-nav-bar__text"
         hover-class="van-nav-bar__text--hover"
         hover-stay-time="70"
-      >{{ leftText }}</view>
-    </block>
-    <slot wx:else name="left" />
-  </view>
-  <view class="van-nav-bar__title title-class van-ellipsis">
-    <block wx:if="{{ title }}">{{ title }}</block>
-    <slot wx:else name="title" />
-  </view>
-  <view class="van-nav-bar__right" bind:tap="onClickRight">
-    <view
-      wx:if="{{ rightText }}"
-      class="van-nav-bar__text"
-      hover-class="van-nav-bar__text--hover"
-      hover-stay-time="70"
-    >{{ rightText }}</view>
-    <slot wx:else name="right" />
+      >{{ rightText }}</view>
+      <slot wx:else name="right" />
+    </view>
   </view>
 </view>