自定义实现tab切换组件，并实现hover切换效果不会进行闪现

本文链接：https://blog.csdn.net/m0_59157023/article/details/129237608

哈喽小伙伴们大家好啊

最近工作任务实现一个tab组件，之前用的是antdesign的组件

首先是tab子组件，对应的html css js代码

 <ul class="epro-hometabs_wrapper">
        <li
         *ngFor="let tab of tabsList;let i = index"
         [ngClass]="{'current': i === 0}"
         (mouseover)="hoverOverTab(i)"
         (click)="checkoutTab(i)"
         >
         <p>{{tab.title}}</p>
        </li>
    </ul>

 .epro-hometabs_wrapper {
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex: 1;
    align-items: center;
    li {
      position: relative;
      height: 56px;
      clear: both;
      padding: 16px 0 16px 16px;
      margin: 0 40px 0 0;
      font-size: 18px;
      margin-right: 32px;
      font-family: PingFangSC-Semibold;
      padding: 12px 0;
      color: #333333;
      font-weight: 400;
      &:hover {
        color: #1E2E80;
        font-weight: 600;
        border-bottom: 6px solid #1E2E80;
        cursor: pointer;
      }
    }
    .current {
      color: #1E2E80;
      font-weight: 600;
      border-bottom: 6px solid #1E2E80;
      cursor: pointer;
    }
  }


  /**
   * 鼠标hover事件
   * @param index 
   */
  hoverOverTab(index: number) {
    this.selectedTabIndex = index;
    // 把index通过hoveredTabIndexChange给他emit出去
    this.hoveredTabIndexChange.emit(index);
  }

  /**
   * 鼠标hover事件
   * @param index 
   */
  checkoutTab(index: number) {
    this.selectedTabIndex = index;
    // 把index通过selectedTabIndexChange给他emit出去
    this.selectedTabIndexChange.emit(index);
  }

接下来是父组件

 <epro-hometabs
                [assetsBaseUrl]='assetsBaseUrl'
                [tabsList]='columns'
                (hoveredTabIndexChange)="hoverOverTabItem($event)"
                (selectedTabIndexChange)='handleClickTabItem($event)'
                [(selectedTabIndex)]='selectedColumnI'
                >
            </epro-hometabs>

/**
   * 鼠标hover事件
   * @param index 当前鼠标hover的index
   */
  hoverOverTabItem(index) {
    // 当前tab的那个模块
    const tabListDom = this.tabListContainer.nativeElement;
    // 当前tab的对应的里面对应的所有模块标签
    const lis = tabListDom.querySelectorAll(".epro-hometabs_wrapper li");
    const items = tabListDom.querySelectorAll(".content-list");
    lis[index].setAttribute('data-id', index);
    // 清空tab的其他li的class样式
    for(let j = 0; j < lis.length; j++){
        lis[j].className = '';
    }
    // 留下自己
    lis[index].className = 'current';
    // 显示内容
    let id = lis[index].getAttribute('data-id');
    // 干掉其他，显示自己
    for(let k = 0; k < items.length; k++){
        items[k].style.display = "none";
    }
    items[id].style.display = "block";
  }

这里核心思想就是，就是加载所有的content 然后根据tab显示和隐藏就不存在闪现了

因为之前我写的，就是会导致切换的时候会闪现，现在看了哈代码知道原理了，类似于一次性加载所有的content 然后根据hoverIndex来切换通过display 来隐藏和展示