ieplus-app/src/components/ie-navbar/ie-navbar.vue

<template>
  <view class="relative z-100" :style="{ opacity: bgOpacity }">
    <uv-navbar :title="title" :bgColor="fixedBgColor" :titleStyle="titleStyle" :placeholder="bgFixed" :fixed="fixed"
      leftIcon="" :autoBack="false" @leftClick="leftClick" :clickHover="clickHover">
      <template #left>
        <slot name="headerLeft">
          <uv-icon name="arrow-left" size="20px" :color="titleStyle.color"></uv-icon>
        </slot>
      </template>
      <template #right>
        <slot name="headerRight" :isTransparent="isTransparent"></slot>
      </template>
    </uv-navbar>
  </view>
</template>

<script lang="ts" setup>
import { useTransferPage } from "@/hooks/useTransferPage";
import { useScroll } from '@/hooks/useScroll';
const { transferBack } = useTransferPage();
const { scrollTop } = useScroll();
const isTransparent = ref(false);
/**
 * ie-navbar 导航栏组件
 * @description 导航栏组件
 * @property {String} title 标题
 * @property {String} bgColor 背景颜色
 * @property {String} titleColor 标题颜色
 * @property {Boolean} fixed 是否固定
 * @property {Boolean} placeholder 是否占位
 * @property {Boolean} opacity 是否透明
 * @property {Boolean} transparent 是否透明
 * @property {Boolean} keepTitleColor 是否保持标题颜色
 * @property {Boolean} customBack 是否自定义返回
 * @property {Object} titleStyle 标题样式
 */

type NavbarOptions = {
  title: string;
  bgColor: string;
  titleColor: string;
  fixed: boolean;
  placeholder: boolean;
  opacity: boolean;
  transparent: boolean;
  keepTitleColor: boolean;
  customBack: boolean;
  clickHover: boolean;
  titleStyle: any;
}
const props = withDefaults(defineProps<NavbarOptions>(), {
  fixed: true,
  placeholder: true,
  clickHover: true,
  titleStyle: () => ({})
});
const navHeight = 60;
const fixedBgColor = computed(() => {
  if (props.opacity) {
    return props.bgColor;
  }
  if (props.transparent) {
    return uni.$uv.colorToRgba(props.bgColor, scrollTop.value / navHeight);
  }
  return props.bgColor;
})
const titleStyle = computed(() => {
  const style = { color: '', fontWeight: 600 };
  if (props.titleColor) {
    style.color = props.titleColor;
  }
  if (props.opacity) {
    return style;
  }
  if (props.keepTitleColor) {
    return style;
  }
  if (props.transparent) {
    if (scrollTop.value / navHeight > 0.5) {
      style.color = '#333';
      isTransparent.value = false;
    } else {
      style.color = '#fff';
      isTransparent.value = true;
    }
  }
  return {
    ...style,
    ...props.titleStyle
  };
})
const bgOpacity = computed(() => {
  if (props.opacity) {
    return scrollTop.value / navHeight;
  }
  return 1
})
const bgFixed = computed(() => {
  if (!props.placeholder) {
    return false;
  }
  if (props.opacity || props.transparent) {
    return false;
  }
  return true;
})

const emit = defineEmits(["leftClick"]);
const leftClick = () => {
  emit("leftClick");
  if (!props.customBack) {
    handleBack();
  }
}
const handleBack = () => {
  transferBack();
}
</script>


<style></style>