h5-colexiu/src/components/col-header/index.tsx

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: '#131415'
    },
    rightText: String,
    onClickRight: {
      type: Function,
      default: () => {}
    },
    border: {
      type: Boolean,
      default: true
    },
    onHeaderBack: {
      // 头部高度设置后返回
      type: Function,
      default: () => {}
    },
    hideHeader: {
      type: Boolean,
      default: false
    },
    leftClickDefault: {
      type: Boolean,
      default: true
    }
  },
  emits: ['leftClick'],
  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.$emit('leftClick', null)
      postMessage({
        api: 'setStatusBarTextColor',
        content: { statusBarTextColor: false }
      })
      if(this.leftClickDefault) {
        if (browser().isApp) {
          postMessage({ api: 'goBack' })
        } else {
          this.$router.back()
        }
      }
    },
    clickRight() {
      this.onClickRight && this.onClickRight()
    }
  },
  render() {
    // 只有app里面才显示头部
    return !this.hideHeader ? (
      <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>
    ) : (
      <div></div>
    )
  }
})