uni-navbar-lite.uvue

<template>
  <view class="uni-navbar">
    <view class="uni-navbar-inner" :style="navbarStyle">
      <view class="left-content" @click="back">
        <text :style="{ color: textColor }" class="uni-icons">{{
          unicode
        }}</text>
      </view>
      <view class="uni-navbar-content" :class="{ 'is-left': isLeft }">
        <text :style="{ color: textColor }">
          <slot>{{ title }}</slot>
        </text>
      </view>
      <view class="right-content">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
  import iconpath from "./uniicons.ttf";
  export default {
    name: "uni-navbar",
    props: {
      title: {
        type: String,
        default: "",
      },
      isLeft: {
        type: Boolean,
        default: false,
      },
      textColor: {
        type: String,
        default: "#000",
      },
    },
    data() {
      return {
        statusBarHeight: 0,
      };
    },
    computed: {
      navbarStyle() : string {
        return `margin-top:${this.statusBarHeight}px`;
      },
      unicode() : string {
        return "\ue600";
      },
    },
    created() {
      uni.loadFontFace({
        global: false,
        family: "UniIconsFontFamily",
        source: `url("${iconpath}")`,
        success() { },
        fail(err) {
          console.log(err);
        },
      });
      const sys = uni.getSystemInfoSync();
      const statusBarHeight = sys.statusBarHeight;
      this.statusBarHeight = statusBarHeight;
    },
    mounted() {
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#007aff",
      });
    },
    methods: {
      back() {
        uni.navigateBack({});
      },
    },
  };
</script>

<style>
  .uni-icons {
    font-family: "UniIconsFontFamily" !important;
    font-size: 26px;
    font-style: normal;
    color: #333;
  }

  .uni-navbar {
    background-color: #007aff;
  }

  .uni-navbar-inner {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    height: 45px;
  }

  .left-content,
  .right-content {
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 100%;
  }

  .uni-navbar-content {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 45px;
    right: 45px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .is-left {
    justify-content: flex-start;
  }
</style>