胶囊-边框倾斜选择器

2021-06-16_213358.png

这种导航网上很难找到资源，都是一堆乱七八糟的东西，完全不知道是啥玩意

下面的代码是自个写的，样式可自己调整

代码是完整代码，复制粘贴就能使用

<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: "标签",
          value: "0"
        },
        {
          label: "标签2",
          value: "2"
        }
      ]
    }
  },
  data() {
    return {
      activeIndex: 0 // 激活的标签下标
    };
  },
  created() {},
  methods: {
    change(item, index) {
      this.activeIndex = index;
      this.$emit("sendMsg", item);
    }
  }
};
</script>
<style lang="scss" scoped>
$default: none; // 默认背景色为空
$borderColor: #5b6299; // 边框颜色
$activeColor: #5b6299; // 激活时的颜色
$fontColor: #9296ab; // 字体颜色
$fontSize: 14px; // 字体大小，默认14px
$fontActive: #fff; // 激活时的字体颜色
$fontStrong: 400; // 字体粗细
.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>

有些样式冗余，懒得该。