2021-06-16_213358.png

這種導(dǎo)航網(wǎng)上很難找到資源，都是一堆亂七八糟的東西，完全不知道是啥玩意

下面的代碼是自個(gè)寫的，樣式可自己調(diào)整

代碼是完整代碼，復(fù)制粘貼就能使用

<template>
  <div class="CapsuleSelect_main-div">
    <ul class="ul_nav">
      <li
        v-for="(item, index) in options"
        :key="index"
        :class="index == activeIndex ? 'active' : ''"
        @click="change(item, index)"
      >
        <label>{{ item.label }}</label>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "CapsuleSelect",
  props: {
    options: {
      type: Array,
      default: () => [
        {
          label: "標(biāo)簽",
          value: "0"
        },
        {
          label: "標(biāo)簽2",
          value: "2"
        }
      ]
    }
  },
  data() {
    return {
      activeIndex: 0 // 激活的標(biāo)簽下標(biāo)
    };
  },
  created() {},
  methods: {
    change(item, index) {
      this.activeIndex = index;
      this.$emit("sendMsg", item);
    }
  }
};
</script>
<style lang="scss" scoped>
$default: none; // 默認(rèn)背景色為空
$borderColor: #5b6299; // 邊框顏色
$activeColor: #5b6299; // 激活時(shí)的顏色
$fontColor: #9296ab; // 字體顏色
$fontSize: 14px; // 字體大小，默認(rèn)14px
$fontActive: #fff; // 激活時(shí)的字體顏色
$fontStrong: 400; // 字體粗細(xì)
.CapsuleSelect_main-div {
  .ul_nav li {
    display: inline-block;
    border: 1px solid $borderColor;
    padding: 6px 14px;
    transform: skew(35deg);
    border-left: 0;
    background: $default;
    label {
      display: inline-block;
      transform: skew(-35deg);
      font-size: $fontSize;
      color: $fontColor;
      font-weight: $fontStrong;
    }
    label:hover {
      cursor: pointer;
    }
  }

  .ul_nav li:first-of-type {
    padding-left: 7px;
    padding-right: 14px;
  }
  .ul_nav li:first-of-type::before {
    content: "";
    width: 50px;
    height: 29px;
    display: block;
    border-left: 1px solid $borderColor;
    border-top: 1px solid $borderColor;
    border-bottom: 1px solid $borderColor;
    position: absolute;
    transform: skew(-35deg);
    top: -1px;
    left: -20px;
    border-radius: 20px 0 0 20px;
  }
  .ul_nav li:last-of-type {
    border-right: 0;
    padding-left: 14px;
    padding-right: 7px;
  }
  .ul_nav li:last-of-type::before {
    content: "";
    width: 50px;
    height: 29px;
    display: block;
    position: absolute;
    transform: skew(-35deg);
    top: -1px;
    right: -20px;
    border-radius: 0 20px 20px 0;
    border-right: 1px solid $borderColor;
    border-top: 1px solid $borderColor;
    border-bottom: 1px solid $borderColor;
  }
  .ul_nav .active {
    background: $activeColor;
  }
  .ul_nav .active::before {
    content: "";
    background: $activeColor;
  }
  .ul_nav .active {
    label {
      color: $fontActive;
    }
  }
}
</style>

有些樣式冗余，懶得該。