Dining_Hall/pages/components/Navbar.vue

<template>
  <view>
    <u-navbar
      :title="title"
      @leftClick="goBack"
      @rightClick="chickIcon"
      :autoBack="true"
      placeholder
      titleStyle="font-size: 16px;font-weight: 700;"
    >
      <view slot="right">
        <span class="right-text">{{ text }}</span>
      </view>
    </u-navbar>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    },
    isBack: {
      type: Boolean,
      default: true
    },
    goTo: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: String,
      default: 'plus'
    },
    showRightIcon: {
      type: Boolean,
      default: false
    },
    showRightText: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    goBack() {
      if (this.isBack) {
        uni.navigateBack()
      } else {
        if (this.goTo) {
          uni.redirectTo({
            url: this.goTo
          })
        } else {
          uni.switchTab({
            url: '/pages/index'
          })
        }
      }
    },
    chickIcon() {
      this.$emit('chickIcon')
    }
  }
}
</script>

<style lang="scss" scoped>
.right-text {
  font-weight: 400;
  font-size: 12px;
  color: #0f274b;
}
</style>