index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <div class="default-width d-flex" ref="scrollBox">
  3. <div class="mr-3 pt-3">
  4. <v-card id="leftCadId" width="240" max-width="240" height="440" class="positionSticky">
  5. <v-list>
  6. <v-list-subheader class="title">简历目录</v-list-subheader>
  7. <v-list-item v-for="(item, i) in items" :key="i" :value="item" :disabled="!item.id" color="primary" @click="handleClick(item)">
  8. <template v-slot:prepend>
  9. <v-icon :icon="item.icon"></v-icon>
  10. </template>
  11. <v-list-item-title v-text="item.text"></v-list-item-title>
  12. <!-- <template v-slot:append>
  13. <v-icon color="primary">mdi-check</v-icon>
  14. </template> -->
  15. </v-list-item>
  16. </v-list>
  17. </v-card>
  18. </div>
  19. <!-- <div class="right">
  20. <basicInfo id="basicInfo"></basicInfo>
  21. <selfEvaluation class="my" id="selfEvaluation"></selfEvaluation>
  22. <jobIntention id="jobIntention"></jobIntention>
  23. <educationExp class="my" id="educationExp"></educationExp>
  24. <projectExperience id="projectExperience"></projectExperience>
  25. <trainingExperience class="my" id="trainingExperience"></trainingExperience>
  26. </div> -->
  27. <div class=" pt-3">
  28. <component
  29. v-for="item in comList"
  30. :key="item.id"
  31. ref="component"
  32. class="mb-3"
  33. :is="item.path"
  34. :id="item.domId"
  35. />
  36. </div>
  37. </div>
  38. </template>
  39. <script setup>
  40. defineOptions({ name: 'resume-index' })
  41. import basicInfo from './components/basicInfo.vue'
  42. import selfEvaluation from './components/selfEvaluation.vue'
  43. import jobIntention from './components/jobIntention.vue'
  44. import trainingExperience from './components/trainingExperience.vue'
  45. import educationExp from './components/educationExp.vue'
  46. import workExperience from './components/workExperience.vue'
  47. import projectExperience from './components/projectExperience.vue'
  48. import vocationalSkills from './components/vocationalSkills.vue'
  49. import { ref } from 'vue'
  50. import { onMounted } from 'vue';
  51. const scrollBox = ref()
  52. const comList = [
  53. { path: basicInfo, id: 'resumeBasicInfo', domId: 'basicInfo' }, // domId与items中的id保持一致
  54. { path: selfEvaluation, id: 'resumeSelfEvaluation', domId: 'selfEvaluation' },
  55. { path: jobIntention, id: 'resumeJobIntention', domId: 'jobIntention' },
  56. { path: educationExp, id: 'resumeEducationExp', domId: 'educationExp' },
  57. { path: workExperience, id: 'resumeProjectExperience', domId: 'workExperience' },
  58. { path: projectExperience, id: 'resumeProjectExperience', domId: 'projectExperience' },
  59. { path: trainingExperience, id: 'resumeTrainingExperience', domId: 'trainingExperience' },
  60. { path: vocationalSkills, id: 'resumeVocationalSkills', domId: 'vocationalSkills' },
  61. ]
  62. const items = [
  63. { text: '基本信息', icon: 'mdi-account-outline', id: 'basicInfo' },
  64. { text: '个人优势', icon: 'mdi-account-star-outline', id: 'selfEvaluation' },
  65. { text: '求职意向', icon: 'mdi-briefcase-variant-outline', id: 'jobIntention' },
  66. { text: '教育经历', icon: 'mdi-school-outline', id: 'educationExp' },
  67. { text: '工作经历', icon: 'mdi-ballot-outline', id: 'workExperience' },
  68. { text: '项目经历', icon: 'mdi-card-text-outline', id: 'projectExperience' },
  69. { text: '培训经历', icon: 'mdi-flag-outline', id: 'trainingExperience' },
  70. { text: '职业技能', icon: 'mdi-star-check-outline', id: 'vocationalSkills' }
  71. ]
  72. onMounted(() => {
  73. const selector = document.getElementById('leftCadId')
  74. if (!selector) return
  75. selector.style.top = `${scrollBox.value.offsetTop + 12}px`
  76. })
  77. const handleClick = (item) => {
  78. if (item.id) {
  79. const selector = document.getElementById(item.id)
  80. if (!selector) return
  81. window.scrollTo({
  82. top: selector.offsetTop - scrollBox.value.offsetTop - 12,
  83. behavior: 'smooth'
  84. })
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. .positionSticky {
  90. position: sticky;
  91. // top: 62px;
  92. }
  93. .title {
  94. color: #333;
  95. font-weight: 600;
  96. font-size: 20px;
  97. }
  98. </style>