element 步骤条配合a标签锚点效果

html

<template>
  <div style="height: 100%">
    <div class="content">
      <a :href="href">
        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1" @click.native="next('#demo1',0)"></el-step>
          <el-step title="步骤 2" @click.native="next('#demo2',1)"></el-step>
          <el-step title="步骤 3" @click.native="next('#demo3',2)"></el-step>
        </el-steps>
      </a>  
    </div>
    <div class="content1">
        <div id="demo1">
          目标位置1
        </div>
        <div id="demo2">
          目标位置2
        </div>
        <div id="demo3">
          目标位置3
        </div>
    </div>
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      active: 0,
      href: ''
    };
  },
  methods: {
    next(item,index) {
      console.log(item,"item")
      this.href = item;
      this.active = index;
    } 
  },
};
</script>

css

<style scoped>
.content {
  height: 20%;
}

.content1 {
  height: 80%;
  overflow: hidden;
  background: #f1f1f1;
}

#demo1 {
    background: red;
    height: 100%;
  }

  #demo2 {
    background: blue;
    height: 100%;
  }

  #demo3 {
    background: green;
    height: 100%;
  }
</style>

效果