MTP20_WEB_GLOBAL/src/packages/gstj/components/layouts/navbar/index.vue

<template>
  <div class="app-navbar" :style="styles">
    <app-navback class="app-navbar__backbutton" @back="goback" v-if="showBackButton" />
    <app-statusbar class="app-navbar__wrapper" @ready="onReady">
      <div class="app-navbar__header">
        <div class="column column--left">
          <div class="column-block">
            <slot name="left"></slot>
          </div>
        </div>
        <div class="column column--center">
          <div class="column-block">
            <slot>
              <span>{{ title }}</span>
            </slot>
          </div>
        </div>
        <div class="column column--right">
          <div class="column-block">
            <slot name="right"></slot>
          </div>
        </div>
      </div>
      <div class="app-navbar__footer">
        <slot name="footer"></slot>
      </div>
    </app-statusbar>
  </div>
</template>

<script lang="ts" setup>
import { useAttrs, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@/stores'

const emit = defineEmits<{ (event: string, ...args: unknown[]): void }>()

const props = defineProps({
  // 导航栏标题
  title: String,
  // 是否固定导航栏
  fixed: Boolean,
  // 是否显示返回按钮
  showBackButton: {
    type: Boolean,
    default: true,
  }
})

const router = useRouter();
const attrs = useAttrs();
const globalStore = useGlobalStore()

const styles = computed(() => ({
  position: props.fixed ? 'fixed' : 'static',
  width: globalStore.clientWidth + 'px',
}))

// 返回按钮事件
const goback = () => {
  if (attrs.onBack) {
    emit('back');
  } else {
    router.go(-1);
  }
}

const onReady = (el: HTMLElement) => {
  emit('ready', el);
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>