锚点跳转

.     效果图

1.定义参数

setup() {
    const name = ref('1.作业信息') //默认的值
    const list = reactive([      //定义一个数据的数组
        {name: "1.作业信息", id: '1'},
        {name: "2.签字确认", id: '2'},
        {name: "3.执行评价", id: '3'},
    ])
    const selectList = (item, index) => {   //点击修改锚点的方法
      this.name = item.name
    }
    return {
      name,list, selectList
    }
  },

2.定义模板   通过id去锚点匹配

   
    作业信息
  
  

    签字确认
  
  

    

      

        

          

            
            
              {{ item.name }}
            
          
        
      
    
  

3.样式CSS

.fan-center-rig {
  flex: 1;
  position: relative;

  .fan-center-rig-bod {
    width: 90%;
    margin-left: 10%;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
  }

  .fan-center-rig-rig {
    width: 80%;
    border-radius: 4px;
    margin: auto;

    .fan-center-rig-cen {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 5px 20px;
      margin-top: 10px;
      border-radius: 5px;
      background: #ddd;

      > img {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 5%;
      }

      a {
        text-decoration: none;
        color: #000;
      }
    }

    .active {
      background: #526ade;

      a {
        color: #fff;
      }
    }
  }
}