修改导航设置

src/components/NafmHeader.vue

 <template>
-  <section>
+  <section v-wrap:height="'v'">
     <div class="nav_bar" :class="{bgImgClass:isBgImg}" :style="navObj.barStyle">
-      <!-- 左侧 自定义 -->
-      <div class="nav_left" v-if="$slots.left" slot="left">
-        <slot name="left" />
+      <div class="nav_top_container" v-if="$slots.top">
+        <slot name="top" />
       </div>
-      <!-- 左侧 默认 箭头以及文字描述 -->
-      <div class="nav_left" v-else @click="handleBack">
-        <i v-if="navObj.barLeftArrow" class="iconfont iconpreviewleft"></i>
-        {{navObj.barLeftText}}
+      <div class="nav_content_container">
+        <!-- 左侧 自定义 -->
+        <div class="nav_left" v-if="$slots.left" slot="left">
+          <slot name="left" />
+        </div>
+        <!-- 左侧 默认 箭头以及文字描述 -->
+        <div class="nav_left" v-else @click="handleBack">
+          <i v-if="navObj.barLeftArrow" class="iconfont iconpreviewleft"></i>
+          {{navObj.barLeftText}}
+        </div>
+        <!-- 标题栏 默认 自定义 -->
+        <div v-if="$slots.default" v-wrap:height="'v'">
+          <div class="nav_title" v-wrap:height="'v'">
+            <slot />
+          </div>
+        </div>
+        <!-- 标题栏 -->
+        <div class="nav_title" v-else>{{navObj.barTitle}}</div>
+        <!-- 右侧插槽 -->
+        <div class="nav_right" v-if="$slots.right" slot="right">
+          <slot name="right" />
+        </div>
       </div>
-      <!-- 标题栏 默认 自定义 -->
-      <div class="nav_title" v-if="$slots.default">
-        <slot />
-      </div>
-      <!-- 标题栏 -->
-      <div class="nav_title" v-else>{{navObj.barTitle}}</div>
-      <!-- 右侧插槽 -->
-      <div class="nav_right" v-if="$slots.right" slot="right">
-        <slot name="right" />
+      <div class="nav_bottom_container" v-if="$slots.bottom">
+        <slot name="bottom" />
       </div>
     </div>
   </section>
@@ -56,7 +66,7 @@ export default {
     }
   },
   computed: {
-    navObj() {
+    navObj () {
       const meta = this.$route.meta
       let leftArrowStatus = true
       if (this.leftArrow != undefined) {
@@ -81,34 +91,69 @@ export default {
     },
   },
   methods: {
-    handleBack() {
+    handleBack () {
       if (this.showBack) {
         this.onBack()
       } else {
         this.$router.back()
       }
+      this.$nextTick
+    }
+  },
+  directives: {
+    wrap: {
+      inserted: function (el, binding, vnode, oldVnode) {
+        setTimeout(() => {
+          const { arg, value } = binding
+          const style = { width: 0, height: 0 }
+          for (let i = 0; i < el.childNodes.length; i++) {
+            const element = el.childNodes[i];
+            if (arg == 'height') {
+              if (value == 'h') {
+                style.height = Math.max(style.height, element.offsetHeight)
+              } else if (value == 'v') {
+                style.height = style.height + element.offsetHeight
+              }
+            } else if (arg == 'width') {
+              if (value == 'h') {
+                style.width = Math.max(style.height, element.offsetWidth)
+              } else if (value == 'v') {
+                style.width = style.height + element.offsetWidth
+              }
+            }
+          }
+
+          style.width && (el.style.width = `${style.width}px`)
+          style.height && (el.style.height = `${style.height}px`)
+        }, 0);
+      }
     }
   }
 }
 </script>
 <style lang="less" scoped>
 @NavHeight: 45px;
+@PaddingSize: 15px;
 section {
-  height: @NavHeight;
   width: 100%;
   position: relative;
   z-index: 10;
 
   .nav_bar {
-    height: @NavHeight;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
-    display: flex;
-    justify-content: space-between;
+    padding: 0 @PaddingSize;
     box-sizing: border-box;
-    padding: 0 20px;
+
+    .nav_content_container {
+      min-height: @NavHeight;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
   }
   .bgImgClass {
     background: url(../assets/icon/bg_navigation.png) !important;
@@ -136,6 +181,7 @@ section {
     top: 0;
     height: 100%;
     width: 100%;
+    min-height: @NavHeight;
     display: flex;
     align-items: center;
     justify-content: center;