ut-navbar.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <up-navbar :fixed="fixed" :border="border">
  3. <template #left>
  4. <slot name="left">
  5. <up-icon v-if="showBack" name="arrow-left" size="40rpx" color="#333" @click="handleBackClick" ></up-icon>
  6. <up-icon v-else name="home" size="40rpx" color="#333" @click="handleHomeClick" ></up-icon>
  7. </slot>
  8. </template>
  9. <template #center>
  10. <slot name="center">
  11. <text class="f-s-38 c-#333 f-w-500">{{ title }}</text>
  12. </slot>
  13. </template>
  14. </up-navbar>
  15. </template>
  16. <script lang="ts" setup>
  17. import { ref, onMounted } from 'vue';
  18. const props = withDefaults(defineProps<{
  19. title?: string;
  20. border?: boolean;
  21. fixed?: boolean;
  22. homeUrl?: string;
  23. }>(), {
  24. title: '',
  25. border: true,
  26. fixed: true,
  27. homeUrl: '/pages/index/index'
  28. });
  29. const emit = defineEmits<{
  30. (e: 'back'): void;
  31. (e: 'home'): void;
  32. }>();
  33. const showBack = ref(false);
  34. onMounted(() => {
  35. const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : [];
  36. showBack.value = pages.length > 1;
  37. });
  38. function handleBackClick() {
  39. emit('back');
  40. const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : [];
  41. if (pages.length > 1) {
  42. uni.navigateBack();
  43. } else {
  44. uni.switchTab({ url: props.homeUrl });
  45. }
  46. }
  47. function handleHomeClick() {
  48. emit('home');
  49. uni.switchTab({ url: props.homeUrl });
  50. }
  51. </script>