vue3中 自定义tabs

效果图

template 使用 

// 使用
<div class="tabs">
      <div class="tab" :class="{ active: active.tab1 === index }"  v-for="(item, index) in tabsList1" :key="index" @click="changeTab(1, index)"> {{ item.label }}
  </div>

script

<script setup lang="ts">
const tabsList = [

    { label: '日' },
    { label: '月' },
];

const tabsList1 = [

    { label: '日' },
    { label: '月' },
];

const active = ref({
    tab1: 0,
    tab2: 0,
});

<script>

scss样式

 // tabs样式
        .tabs {
            margin-top: vw(10);

            display: flex;

            // gap: 20px;

            .tab {
                text-align: center;
                width: 70px;
                height: 25px;
                background-color: #07ffd5;
                padding: 3px 10px;
                position: relative;
                transform: scale(1);
                transform-origin: left bottom;
                border-radius: 5px;
                transition: background-color .3s, color .3s, transform .3s;

                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    display: block;
                    background-color: #FFFFFF;
                    width: 15px;
                    height: 100%;
                    top: 0;
                    z-index: -1;
                    transition: background-color .3s;
                }

                &:before {
                    left: 0;
                    transform: skewX(20deg) translateX(-50%);
                }

                &:after {
                    right: 0;
                    transform: skewX(20deg) translateX(50%);
                }

                &.active {
                    background-color: #007AFF;
                    color: #ffff;
                    transform: scale(1.11);
                    z-index: 9;

                    &:before,
                    &:after {
                        background-color: #007AFF;
                    }

                    &:before {
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                    }

                    &:after {
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                    }

                }

                &:first-child:before,
                &:last-child:after {
                    display: none;
                }

                &:first-child {
                    padding-left: 20px;
                }

                &:last-child {
                    padding-right: 20px;
                }
            }
        }

暂存