VAVABUY/components/navbar.vue

<template>
  <view class="navbar__container">
    <Theme>
      <up-navbar
        placeholder
        :border="border"
        :fixed="fixed"
        :bgColor="bgColor"
        :height="height"
        :style="{ '--borderColor': borderColor }"
        @leftClick="handleLeftClick"
        @rightClick="handleRightClick"
        v-if="!navShow"
      >
        <template #left>
          <slot name="left">
            <view class="left">
              <u-icon
                :size="iconSize"
                :color="leftIconColor"
                :name="!leftShow ? 'arrow-left' : leftIcon"
              ></u-icon>
              <view class="left_text" :style="leftStyle" v-if="!!leftText">{{
                t(leftText)
              }}</view>
            </view>
          </slot>
        </template>
        <template #center>
          <slot name="center">
            <trans
              class="nav_title"
              :style="navStyle"
              v-if="!!title"
              :_t="title"
            />
          </slot>
        </template>
        <template #right>
          <slot name="right"></slot>
        </template>
      </up-navbar>
    </Theme>
  </view>
</template>

<script setup>
import { t } from "@/locale";
const props = defineProps({
  autoBack: Boolean,
  fixed: Boolean,
  leftText: {
    type: [String, Number],
    default: "",
  },
  bgColor: {
    type: String,
    default: "var(--light)",
  },
  iconSize: {
    type: Number,
    default: 20,
  },
  leftIconColor: {
    type: String,
    default: "var(--text)",
  },
  title: {
    type: String,
    default: "",
  },
  leftIcon: {
    type: String,
    default: "",
  },
  leftShow: Boolean,
  border: Boolean,
  height: {
    type: String,
    default: "44px",
  },
  leftStyle: {
    type: Object,
    default: () => ({}),
  },
  navStyle: {
    type: Object,
    default: () => ({}),
  },
  borderColor: {
    type: String,
    default: "var(--bor-color)",
  },
  navShow: Boolean,
});
const emit = defineEmits(["leftClick", "rightClick"]);

const handleLeftClick = () => {
  if (props.autoBack) return emit("leftClick");
  if (props.leftShow) return;
  uni.navigateBack();
};
const handleRightClick = () => {
  if (props.leftShow) return;
  emit("rightClick");
};
</script>

<style lang="less" scoped>
@import url("../style.less");

.navbar__container {
  max-width: 1536rpx;
}

.left {
  .flex_position(center, flex-end);

  /deep/ .u-icon--right {
    .u-icon__icon {
      font-weight: 700 !important;
    }
  }

  .left_text {
    .size(15px);
    color: var(--text);
    margin-left: 3px;
  }
}

.nav_title {
  width: 12.5rem;
  .size(14px);
  color: var(--text);
  text-align: center;
  font-weight: 700;
}

/deep/ .u-border-bottom {
  border-color: var(--bor-color) !important;
}

/deep/ .u-navbar--fixed {
  z-index: 1000;
}
</style>