标签：name fan 锚点 跳转 rig margin id center

.     效果图

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去锚点匹配

<div id="1.作业信息">   
    作业信息
  </div>
  <div id="2.签字确认">
    签字确认
  </div>
  <div class="flex1">
    <div class="fan-center-rig">
      <div class="fan-center-rig-bod">
        <div v-for="(item,index) in list" :key="index" class="fan-center-rig-rig">
          <div :class="[name==item.name?'active':'']" class="fan-center-rig-cen" @click="selectList(item,index)">
            <img v-if="name==item.name" alt="" src="@/assets/logo.png">
            <a :href="'#'+item.name">
              {{ item.name }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

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;
      }
    }
  }
}

标签：name,fan,锚点,跳转,rig,margin,id,center
来源： https://www.cnblogs.com/czwhandsome/p/16117631.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。