menduner/src/views/resume/index.vue

<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=" 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 { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
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: t('resume.basicInfo'), icon: 'mdi-account-outline', id: 'basicInfo' },
  { text: t('resume.personalAdvantages'), icon: 'mdi-account-star-outline', id: 'selfEvaluation' },
  { text: t('resume.jobIntention'), icon: 'mdi-briefcase-variant-outline', id: 'jobIntention' },
  { text: t('resume.educationExp'), icon: 'mdi-school-outline', id: 'educationExp' },
  { text: t('resume.workExperience'), icon: 'mdi-ballot-outline', id: 'workExperience' },
  { text: t('resume.projectExperience'), icon: 'mdi-card-text-outline', id: 'projectExperience' },
  { text: t('resume.trainingExperience'), icon: 'mdi-flag-outline', id: 'trainingExperience' },
  { text: t('resume.vocationalSkills'), 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>