修改状况

src/components/col-header/index.module.less

@@ -1,25 +1,30 @@
-.colHeader {
-  --van-font-weight-bold: 600;
-  :global {
-    .van-nav-bar__title,
-    .van-icon {
-      color: inherit;
-    }
-    .van-nav-bar__right {
-      & > div {
-        line-height: 0;
-      }
-    }
-  }
-  &.transparent {
-    background-color: transparent;
-  }
-}
-
-.headerSection {
-  // min-height: var(--van-nav-bar-height);
-  position: relative;
-  // :global(.van-nav-bar--fixed) {
-  //   box-shadow: 10px 10px 10px var(--box-shadow-color);
-  // }
-}
+.colHeader {
+  --van-font-weight-bold: 600;
+
+  :global {
+
+    .van-nav-bar__title,
+    .van-icon {
+      color: inherit;
+    }
+
+    .van-nav-bar__right {
+      &>div {
+        line-height: 0;
+      }
+    }
+  }
+
+  &.transparent {
+    background-color: transparent;
+  }
+}
+
+.headerSection {
+  // min-height: var(--van-nav-bar-height);
+  position: relative;
+  --van-nav-bar-arrow-size: 22px;
+  // :global(.van-nav-bar--fixed) {
+  //   box-shadow: 10px 10px 10px var(--box-shadow-color);
+  // }
+}

src/components/col-header/index.tsx

@@ -1,176 +1,176 @@
-import { postMessage } from '@/helpers/native-message'
-import { browser } from '@/helpers/utils'
-import { NavBar } from 'vant'
-import { defineComponent, PropType, Teleport } from 'vue'
-import styles from './index.module.less'
-
-type backIconColor = 'black' | 'white'
-
-export default defineComponent({
-  name: 'col-header',
-  props: {
-    title: String,
-    isBack: {
-      type: Boolean,
-      default: false
-    },
-    backIconColor: {
-      // 返回按钮颜色
-      type: String as PropType<backIconColor>,
-      default: 'black'
-    },
-    isFixed: {
-      type: Boolean,
-      default: true
-    },
-    styleName: {
-      type: Object,
-      default: () => ({})
-    },
-    titleClass: String,
-    background: {
-      type: String,
-      default: 'white'
-    },
-    color: {
-      type: String,
-      default: '#323233'
-    },
-    rightText: String,
-    onClickRight: {
-      type: Function,
-      default: () => {}
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    onHeaderBack: {
-      // 头部高度设置后返回
-      type: Function,
-      default: () => {}
-    }
-  },
-  watch: {
-    backIconColor() {
-      // 设置返回按钮颜色
-      postMessage({
-        api: 'backIconChange',
-        content: { iconStyle: this.backIconColor }
-      })
-    }
-  },
-  data() {
-    return {
-      headerTitle: null as any,
-      navBarHeight: 0, // 顶部导航栏高度
-      titleHeight: 44 // 顶部导航高度（默认44px）
-    }
-  },
-  mounted() {
-    this.headerTitle = this.title || this.$route.meta.title
-    this.navBarInit(() => {
-      this.onHeaderBack && this.onHeaderBack()
-    })
-  },
-  unmounted() {
-    // 设置是否显示导航栏 0 显示 1 不显示
-    postMessage({ api: 'setBarStatus', content: { status: 1 } })
-    // 设置返回按钮颜色
-    postMessage({
-      api: 'backIconChange',
-      content: { iconStyle: 'black' as backIconColor }
-    })
-  },
-  methods: {
-    navBarInit(callBack?: Function) {
-      // 设置是否显示导航栏 0 显示 1 不显示
-      postMessage({ api: 'setBarStatus', content: { status: 0 } })
-      // 设置返回按钮颜色
-      postMessage({
-        api: 'backIconChange',
-        content: { iconStyle: this.backIconColor || 'black' }
-      })
-
-      let sNavHeight = sessionStorage.getItem('navHeight')
-      let sTitleHeight = sessionStorage.getItem('titleHeight')
-      if (sNavHeight && sTitleHeight) {
-        this.navBarHeight = Number(sNavHeight)
-        callBack && callBack()
-      } else {
-        postMessage({ api: 'getNavHeight' }, res => {
-          const { content } = res as any
-          const dpi = content.dpi || 2
-          if (content.navHeight) {
-            const navHeight = content.navHeight / dpi
-            sessionStorage.setItem('navHeight', String(navHeight))
-            this.navBarHeight = navHeight
-          }
-          if (content.titleHeight) {
-            // 导航栏的高度
-            const titleHeight = content.titleHeight / dpi
-            sessionStorage.setItem('titleHeight', String(titleHeight))
-            this.titleHeight = titleHeight
-          }
-          callBack && callBack()
-        })
-      }
-      !browser().isApp && callBack && callBack()
-    },
-    onClickLeft() {
-      this.$router.back()
-    },
-    clickRight() {
-      this.onClickRight && this.onClickRight()
-    }
-  },
-  render() {
-    return (
-      <div>
-        {this.$slots.content ? (
-          <div
-            style={{
-              paddingTop: `${this.navBarHeight}px`,
-              background: this.background
-            }}
-            class={styles.headerSection}
-          >
-            {this.$slots.content(this.navBarHeight)}
-          </div>
-        ) : (
-          <>
-            <div
-              // style={{ paddingTop: `${this.navBarHeight}px` }}
-              style={{
-                minHeight: `calc(var(--van-nav-bar-height) + ${this.navBarHeight}px)`
-              }}
-              class={styles.headerSection}
-            >
-              <NavBar
-                title={this.headerTitle}
-                class={[styles.colHeader]}
-                style={{
-                  background: this.background,
-                  color: this.color,
-                  paddingTop: `${this.navBarHeight}px`,
-                  zIndex: 99
-                }}
-                left-arrow={this.isBack}
-                rightText={this.rightText}
-                fixed={this.isFixed}
-                border={this.border}
-                onClick-right={this.clickRight}
-                onClick-left={this.onClickLeft}
-                v-slots={{
-                  right: () =>
-                    (this.$slots.right && this.$slots.right()) || this.rightText
-                }}
-              ></NavBar>
-            </div>
-            {this.$slots.default ? this.$slots.default() : null}
-          </>
-        )}
-      </div>
-    )
-  }
-})
+import { postMessage } from '@/helpers/native-message'
+import { browser } from '@/helpers/utils'
+import { NavBar } from 'vant'
+import { defineComponent, PropType, Teleport } from 'vue'
+import styles from './index.module.less'
+
+type backIconColor = 'black' | 'white'
+
+export default defineComponent({
+  name: 'col-header',
+  props: {
+    title: String,
+    isBack: {
+      type: Boolean,
+      default: true
+    },
+    backIconColor: {
+      // 返回按钮颜色
+      type: String as PropType<backIconColor>,
+      default: 'black'
+    },
+    isFixed: {
+      type: Boolean,
+      default: true
+    },
+    styleName: {
+      type: Object,
+      default: () => ({})
+    },
+    titleClass: String,
+    background: {
+      type: String,
+      default: 'white'
+    },
+    color: {
+      type: String,
+      default: '#323233'
+    },
+    rightText: String,
+    onClickRight: {
+      type: Function,
+      default: () => {}
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    onHeaderBack: {
+      // 头部高度设置后返回
+      type: Function,
+      default: () => {}
+    }
+  },
+  watch: {
+    backIconColor() {
+      // 设置返回按钮颜色
+      postMessage({
+        api: 'backIconChange',
+        content: { iconStyle: this.backIconColor }
+      })
+    }
+  },
+  data() {
+    return {
+      headerTitle: null as any,
+      navBarHeight: 0, // 顶部导航栏高度
+      titleHeight: 44 // 顶部导航高度（默认44px）
+    }
+  },
+  mounted() {
+    this.headerTitle = this.title || this.$route.meta.title
+    this.navBarInit(() => {
+      this.onHeaderBack && this.onHeaderBack()
+    })
+  },
+  unmounted() {
+    // 设置是否显示导航栏 0 显示 1 不显示
+    postMessage({ api: 'setBarStatus', content: { status: 1 } })
+    // 设置返回按钮颜色
+    postMessage({
+      api: 'backIconChange',
+      content: { iconStyle: 'black' as backIconColor }
+    })
+  },
+  methods: {
+    navBarInit(callBack?: Function) {
+      // 设置是否显示导航栏 0 显示 1 不显示
+      postMessage({ api: 'setBarStatus', content: { status: 0 } })
+      // 设置返回按钮颜色
+      postMessage({
+        api: 'backIconChange',
+        content: { iconStyle: this.backIconColor || 'black' }
+      })
+
+      const sNavHeight = sessionStorage.getItem('navHeight')
+      const sTitleHeight = sessionStorage.getItem('titleHeight')
+      if (sNavHeight && sTitleHeight) {
+        this.navBarHeight = Number(sNavHeight)
+        callBack && callBack()
+      } else {
+        postMessage({ api: 'getNavHeight' }, res => {
+          const { content } = res as any
+          const dpi = content.dpi || 2
+          if (content.navHeight) {
+            const navHeight = content.navHeight / dpi
+            sessionStorage.setItem('navHeight', String(navHeight))
+            this.navBarHeight = navHeight
+          }
+          if (content.titleHeight) {
+            // 导航栏的高度
+            const titleHeight = content.titleHeight / dpi
+            sessionStorage.setItem('titleHeight', String(titleHeight))
+            this.titleHeight = titleHeight
+          }
+          callBack && callBack()
+        })
+      }
+      !browser().isApp && callBack && callBack()
+    },
+    onClickLeft() {
+      this.$router.back()
+    },
+    clickRight() {
+      this.onClickRight && this.onClickRight()
+    }
+  },
+  render() {
+    return (
+      <div>
+        {this.$slots.content ? (
+          <div
+            style={{
+              paddingTop: `${this.navBarHeight}px`,
+              background: this.background
+            }}
+            class={styles.headerSection}
+          >
+            {this.$slots.content(this.navBarHeight)}
+          </div>
+        ) : (
+          <>
+            <div
+              // style={{ paddingTop: `${this.navBarHeight}px` }}
+              style={{
+                minHeight: `calc(var(--van-nav-bar-height) + ${this.navBarHeight}px)`
+              }}
+              class={styles.headerSection}
+            >
+              <NavBar
+                title={this.headerTitle}
+                class={[styles.colHeader]}
+                style={{
+                  background: this.background,
+                  color: this.color,
+                  paddingTop: `${this.navBarHeight}px`,
+                  zIndex: 99
+                }}
+                left-arrow={this.isBack}
+                rightText={this.rightText}
+                fixed={this.isFixed}
+                border={this.border}
+                onClick-right={this.clickRight}
+                onClick-left={this.onClickLeft}
+                v-slots={{
+                  right: () =>
+                    (this.$slots.right && this.$slots.right()) || this.rightText
+                }}
+              ></NavBar>
+            </div>
+            {this.$slots.default ? this.$slots.default() : null}
+          </>
+        )}
+      </div>
+    )
+  }
+})