123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <template>
- <div class="default-width d-flex" ref="scrollBox">
- <div class="mr-3 pt-3">
- <v-card id="leftCadId" width="240" max-width="240" height="440" class="positionSticky">
- <v-list>
- <v-list-subheader class="title">简历目录</v-list-subheader>
- <v-list-item v-for="(item, i) in items" :key="i" :value="item" :disabled="!item.id" color="primary" @click="handleClick(item)">
- <template v-slot:prepend>
- <v-icon :icon="item.icon"></v-icon>
- </template>
- <v-list-item-title v-text="item.text"></v-list-item-title>
- <!-- <template v-slot:append>
- <v-icon color="primary">mdi-check</v-icon>
- </template> -->
- </v-list-item>
- </v-list>
- </v-card>
- </div>
- <!-- <div class="right">
- <basicInfo id="basicInfo"></basicInfo>
- <selfEvaluation class="my" id="selfEvaluation"></selfEvaluation>
- <jobIntention id="jobIntention"></jobIntention>
- <educationExp class="my" id="educationExp"></educationExp>
- <projectExperience id="projectExperience"></projectExperience>
- <trainingExperience class="my" id="trainingExperience"></trainingExperience>
- </div> -->
- <div class=" pt-3">
- <component
- v-for="item in comList"
- :key="item.id"
- ref="component"
- class="mb-3"
- :is="item.path"
- :id="item.domId"
- />
- </div>
- </div>
- </template>
- <script setup>
- defineOptions({ name: 'resume-index' })
- import basicInfo from './components/basicInfo.vue'
- import selfEvaluation from './components/selfEvaluation.vue'
- import jobIntention from './components/jobIntention.vue'
- import trainingExperience from './components/trainingExperience.vue'
- import educationExp from './components/educationExp.vue'
- import workExperience from './components/workExperience.vue'
- import projectExperience from './components/projectExperience.vue'
- import vocationalSkills from './components/vocationalSkills.vue'
- import { ref } from 'vue'
- import { onMounted } from 'vue';
- const scrollBox = ref()
- const comList = [
- { path: basicInfo, id: 'resumeBasicInfo', domId: 'basicInfo' }, // domId与items中的id保持一致
- { path: selfEvaluation, id: 'resumeSelfEvaluation', domId: 'selfEvaluation' },
- { path: jobIntention, id: 'resumeJobIntention', domId: 'jobIntention' },
- { path: educationExp, id: 'resumeEducationExp', domId: 'educationExp' },
- { path: workExperience, id: 'resumeProjectExperience', domId: 'workExperience' },
- { path: projectExperience, id: 'resumeProjectExperience', domId: 'projectExperience' },
- { path: trainingExperience, id: 'resumeTrainingExperience', domId: 'trainingExperience' },
- { path: vocationalSkills, id: 'resumeVocationalSkills', domId: 'vocationalSkills' },
- ]
- const items = [
- { text: '基本信息', icon: 'mdi-account-outline', id: 'basicInfo' },
- { text: '个人优势', icon: 'mdi-account-star-outline', id: 'selfEvaluation' },
- { text: '求职意向', icon: 'mdi-briefcase-variant-outline', id: 'jobIntention' },
- { text: '教育经历', icon: 'mdi-school-outline', id: 'educationExp' },
- { text: '工作经历', icon: 'mdi-ballot-outline', id: 'workExperience' },
- { text: '项目经历', icon: 'mdi-card-text-outline', id: 'projectExperience' },
- { text: '培训经历', icon: 'mdi-flag-outline', id: 'trainingExperience' },
- { text: '职业技能', icon: 'mdi-star-check-outline', id: 'vocationalSkills' }
- ]
- onMounted(() => {
- const selector = document.getElementById('leftCadId')
- if (!selector) return
- selector.style.top = `${scrollBox.value.offsetTop + 12}px`
- })
- const handleClick = (item) => {
- if (item.id) {
- const selector = document.getElementById(item.id)
- if (!selector) return
- window.scrollTo({
- top: selector.offsetTop - scrollBox.value.offsetTop - 12,
- behavior: 'smooth'
- })
- }
- }
- </script>
- <style lang="scss" scoped>
- .positionSticky {
- position: sticky;
- // top: 62px;
- }
- .title {
- color: #333;
- font-weight: 600;
- font-size: 20px;
- }
- </style>
|