vue3 :first-child和:last-child的使用

文章目录

• 前言
• 一、先看效果图
• 二、代码效果
• 总结

前言

:first-child和:last-child的巧妙使用。

一、先看效果图

item1选中效果

鼠标到item2上的效果

二、代码效果

<script lang="ts" setup>
const tabData = [{ name: 'item1', content: '' }, { name: 'item2', content: '' }, { name: 'item3', content: '' }]
const currentContentIndex = ref(0)
</script>

<template>
  <div class="flex-none bg-white">
    <div
      class="ml-20px mt-20px mr-20px flex flex-row h-40px product-tab"
    >
      <div
        v-for="(item, index) in tabData"
        :key="item.id"
        class="tab_item h-40px pl-10px pr-10px bg-white cursor-pointer min-w-132px flex items-center text-#333"
        :class="{ active: currentContentIndex === index }"
        @click.stop="currentContentIndex = index"
      >
        <div class="center font-500 text-16px">
          {{ item.name }}
        </div>
        <div class="del-handle">
          <i
            class="edit-icon i-mx-edit block"
          />
          <i
            v-if="index !== 0"
            class="delete-icon i-mx-close block"
            alt="删除按钮"
          />
        </div>
      </div>
      <div
        class="h-100% w-40px delete_button center cursor-pointer"
      >
        +
      </div>
    </div>
    <div class="bottom_line mb-30px" />
  </div>
</template>

<style lang="scss" scoped>
.product-tab {
  & > div {
    &:first-child {
      border-radius: 10px 0 0 0;
      border-left-width: 1px;
      border-top-width: 1px;
    }

    border-width: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    border-bottom-width: 0;

    &:last-child {
      border-radius: 0 10px 0 0;
      border-left-width: 0;
      border-right-width: 1px;
      border-top-width: 1px;
    }
  }

  & > div + div {
    border-left-width: 0;
  }
}
.tab_item {
  justify-content: center;
  &.active {
    background: #f0f2f5;
    position: relative;
    border-color: #f0f2f5 !important;
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      background: #01bfbf;
      width: 32px;
      height: 3px;
    }
  }
  &:hover {
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 10px;
    color: #00a7a7;
    .del-handle {
      display: flex;
    }
  }
  .del-handle {
    margin-left: 20px;
    display: none;
    align-items: center;
    justify-content: flex-end;
    .edit-icon,
    .delete-icon {
      cursor: pointer;
      width: 20px;
      height: 20px;
    }
    .edit-icon {
      margin-right: 10px;
    }
  }
}
.delete_button {
  border-top-right-radius: 10px;
  border: 1px solid #e5e5e5;
  color: #333333;
  &:hover {
    color: #00a7a7;
  }
}

.bottom_line {
  border-top: 0.5px solid #e5e5e5;
  height: 1px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>

总结

这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！