手搓锚点

<template>
  <div class="boxs">
    <div class="left" style="width:85%">
      <div class="eaa__add__area">
        <el-row id="jbxx">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">基本信息</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
        <el-row id="dtxx">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">单体信息</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
        <el-row id="czpz">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">操作配置</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
        <el-row id="cdpz">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">测点配置</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
      </div>
    </div>
    <div class="right" style="width:12%">
      <div style="position:fixed;rigth:0">
        <div @click="stepClick(1, 'jbxx')" :style="{ 'color': ((stepData !== 1) ? '#000' : '#016fa0') }"><span>●</span>基础信息
        </div>
        <div @click="stepClick(2, 'dtxx')" :style="{ 'color': ((stepData !== 2) ? '#000' : '#016fa0') }"><span>●</span>单体信息
        </div>
        <div @click="stepClick(3, 'czpz')" :style="{ 'color': ((stepData !== 3) ? '#000' : '#016fa0') }"><span>●</span>操作配置
        </div>
        <div @click="stepClick(4, 'cdpz')" :style="{ 'color': ((stepData !== 4) ? '#000' : '#016fa0') }"><span>●</span>测点配置
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 表单
const stepData = ref(1)
// 步骤条
const stepClick = (item, selector) => {
  console.log(item, selector)
  stepData.value = item
  stepData.value = !item ? 1 : item //控制高亮的按钮
  selector = !selector ? 'selector' : selector //判断当前是否有传入对的 id  如果有那么不是点击的回到顶部 如果没有那么就是点击的回到顶部
  document.getElementById(selector).scrollIntoView({
    behavior: "smooth",  // 平滑过渡
    block: "start"  // 上边框与视窗顶部平齐。默认值
  });
}
onMounted(() => {
});
</script>

<style scoped lang="scss">
.boxs {
  display: flex;
  justify-content: space-between;
}

.left {
}

.right {
  div {
    padding: 40px 0
  }
}</style>

<template>
  <div class="boxs">
    <div class="left" style="width:85%">
      <div class="eaa__add__area">
        <el-row id="jbxx">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">基本信息</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
        <el-row id="dtxx">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">单体信息</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
        <el-row id="czpz">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">操作配置</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
        <el-row id="cdpz">
          <div style="padding:0px 0 0px 200px;font-weight: bold;font-size :16px; color:#016fa0">测点配置</div>
          <div style="height:1999px;width:100%;border:1px solid #ccc"></div>
        </el-row>
      </div>
    </div>
    <div class="right" style="width:12%">
      <div style="position:fixed;rigth:0">
        <div @click="stepClick(1, 'jbxx')" :style="{ 'color': ((stepData !== 1) ? '#000' : '#016fa0') }"><span>●</span>基础信息
        </div>
        <div @click="stepClick(2, 'dtxx')" :style="{ 'color': ((stepData !== 2) ? '#000' : '#016fa0') }"><span>●</span>单体信息
        </div>
        <div @click="stepClick(3, 'czpz')" :style="{ 'color': ((stepData !== 3) ? '#000' : '#016fa0') }"><span>●</span>操作配置
        </div>
        <div @click="stepClick(4, 'cdpz')" :style="{ 'color': ((stepData !== 4) ? '#000' : '#016fa0') }"><span>●</span>测点配置
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 表单
const stepData = ref(1)
// 步骤条
const stepClick = (item, selector) => {
  console.log(item, selector)
  stepData.value = item
  stepData.value = !item ? 1 : item //控制高亮的按钮
  selector = !selector ? 'selector' : selector //判断当前是否有传入对的 id  如果有那么不是点击的回到顶部 如果没有那么就是点击的回到顶部
  document.getElementById(selector).scrollIntoView({
    behavior: "smooth",  // 平滑过渡
    block: "start"  // 上边框与视窗顶部平齐。默认值
  });
}
onMounted(() => {
});
</script>

<style scoped lang="scss">
.boxs {
  display: flex;
  justify-content: space-between;
}

.left {
}

.right {
  div {
    padding: 40px 0
  }
}</style>