vue2处理

<!-- vue tab切换 -->
<template>
  <div class="tabs">
    <div class="tab" :class="active == 1 ? 'tab-active' : ''" @click="tabClick(1, 'setRef1')">人员信息</div>
    <div class="tab" :class="active == 2 ? 'tab-active' : ''" @click="tabClick(2, 'setRef2')"> 事件信息 </div>
    <div class="tab" :class="active == 3 ? 'tab-active' : ''" @click="tabClick(3, 'setRef3')">办理记录</div>
    <div class="tab" :class="active == 4 ? 'tab-active' : ''" @click="tabClick(4, 'setRef4')"> 历次信访活动</div>
  </div>

  <div class="content">
    <div class="content-item" ref="setRef1"></div>
    <div class="content-item" ref="setRef2"></div>
    <div class="content-item" ref="setRef3"></div>
    <div class="content-item" ref="setRef4"></div>
 </div>
</template>
<script>

// vue2跳转处理
export default {
  data() {
    return {},
  },
  mounted() {},
  methods: {
    tabClick(val, formName) {
      this.active = val
      this.$refs[formName].scrollIntoView({
        block: 'start',
        behavior: 'smooth',
        inline: 'nearest',
     })
  },
}
</script>
<style>
// 锚点样式 $xxx  是封装的样式 自己看
.tabs {
  width: 100%;
  line-height: 50px;
  display: flex;
  justify-content: space-around;
  background-color: $cardBg;
  z-index: 2;
  .tab {
    line-height: 30px;
    color: $activeTitleFont;
  }
  .tab-active {
    font-weight: 500;
    color: $subMenuBg;
    border-bottom: 2.3px solid $subMenuBg;
  }
}
.content {
  margin: 50px 0 10px;
  .content-item {
    padding: 10px;
    background: $cardBg;
    margin-bottom: 5px;
  }
}
</style>

vue3处理

<!-- vue tab切换 -->
<template>
  <div class="tabs">
    <div class="tab" :class="active == 1 ? 'tab-active' : ''" @click="tabClick(1)">人员信息</div>
    <div class="tab" :class="active == 2 ? 'tab-active' : ''" @click="tabClick(2)"> 事件信息 </div>
    <div class="tab" :class="active == 3 ? 'tab-active' : ''" @click="tabClick(3)">办理记录</div>
    <div class="tab" :class="active == 4 ? 'tab-active' : ''" @click="tabClick(4)"> 历次信访活动</div>
  </div>

  <div class="content">
    <div class="content-item" ref="setRef1"></div>
    <div class="content-item" ref="setRef2"></div>
    <div class="content-item" ref="setRef3"></div>
    <div class="content-item" ref="setRef4"></div>
 </div>
</template>
<script setup>
import {  ref } from 'vue'

const setRef1 = ref(null)
const setRef2 = ref(null)
const setRef3 = ref(null)
const setRef4 = ref(null)

const tabClick = (val) => {
  state.active = val
  if (val == 1) {
      setRef1.value.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'nearest', })
  } else if (val == 2) {
    setRef2.value.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'nearest', })
  } else if (val == 3) { 
    setRef3.value.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'nearest', })
  } else if (val == 4) { 
    setRef4.value.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'nearest', })
  }
}
</script>
<style>
// 锚点样式 同上
</style>