pageHeader.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!--页面中头部展示标题使用-->
  2. <script setup lang="ts">
  3. import { toRefs } from 'vue'
  4. import { linkNavigateTo } from '~/utils/util'
  5. const props = defineProps({
  6. //副标题
  7. title: {
  8. type: String,
  9. default: '',
  10. },
  11. //主标题
  12. menuTitle:{
  13. type: String,
  14. default: '',
  15. },
  16. navigateToTitle: {
  17. type: Object,
  18. default: null,
  19. },
  20. page:{
  21. type: String,
  22. default: '',
  23. },
  24. })
  25. const { title } = toRefs(props)
  26. const router = useRouter();
  27. const goBack =()=>{
  28. router.go(-1);
  29. }
  30. </script>
  31. <template>
  32. <div class="mt-20px mb-20px">
  33. <span class="fontColor333 fonts14 cursors" @click="linkNavigateTo('/')">首页{{page}} </span>
  34. <span v-if="navigateToTitle" class="fontColor333 fonts14 cursors" @click="linkNavigateTo(navigateToTitle.linkUrl, navigateToTitle.params)"> > {{navigateToTitle.title}}</span>
  35. <span v-if="menuTitle" class="fontColor333 fonts14 cursors" @click="goBack"> > {{menuTitle}}</span>
  36. <span class="text-#666 fonts14"> > {{title}}</span>
  37. </div>
  38. </template>
  39. <style scoped lang="scss"></style>