for_client/src/global/components/hc-tabs-simple/index.vue

<template>
    <div class="hc-sb-table">
        <svg class="svg-tabs" height="45px" width="40px" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <clipPath id="tabs">
                <path d="M40,45C15,36,33,0,0,0v45H40z" fill-rule="evenodd"/>
            </clipPath>
        </svg>
        <el-tabs v-model="curKey" :class="curIndex === 0 ? 'first' : curIndex === datas.length-1 ? 'fourth' : ''"
                 @tab-change="tabClick">
            <el-tab-pane v-for="item in datas" :label="item.label" :name="item.key">
                <template #label>
                    <HcIcon v-if="item.icon" :name="item.icon" class="icon"/>
                    <span class="name">{{ item.label }}</span>
                </template>
                <slot :name='`tab-${item.key}`'/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
import {arrIndex} from "js-fast-way"

const props = defineProps({
    datas: {
        type: Array,
        default: () => []
    },
    cur: {
        type: [String, Number],
        default: ''
    }
})

//初始变量
const curKey = ref(props.cur)
const curIndex = ref(0)

//监听
watch(() => [
    props.cur,
    props.datas
], ([cur, datas]) => {
    curKey.value = cur
    getCurIndex(datas, cur)
})

//挂载完成
nextTick(() => {
    getCurIndex(props.datas, props.cur)
})

//获取索引
const getCurIndex = (datas, key) => {
    curIndex.value = arrIndex(datas, 'key', key)
}

//事件
const emit = defineEmits(['tabClick'])
const tabClick = (key) => {
    curKey.value = key;
    getCurIndex(props.datas, key)
    emit('tabClick', key)
}
</script>

<style lang="scss" scoped>
.hc-sb-table {
    position: relative;
    height: 100%;
    .svg-tabs {
        opacity: 0;
        width: 0;
        height: 0;
    }
}
</style>

<style lang="scss">
.hc-sb-table .el-tabs {
    position: relative;
    margin-top: -18px;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
    .el-tabs__header {
        margin-bottom: 0;
        .el-tabs__nav-wrap::after {
            background-color: transparent;
        }
        .el-tabs__nav {
            height: 45px;
            .el-tabs__item {
                margin-top: 5px;
                padding: 0 20px;
                user-select: none;
                display: inline-flex;
                align-content: center;
                --el-text-color-primary: #838791;
                background-color: #E5EBEF;
                &::after {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 15px;
                    background-color: #CCCCCC;
                    top: 12px;
                    left: 0;
                }
                .hc-icon-i {
                    margin-right: 5px;
                }
                .hc-icon-i, .name {
                    position: relative;
                    z-index: 10;
                }
            }
            .el-tabs__item:nth-child(2) {
                border-radius: 10px 0 0 0;
                &::after {
                    display: none;
                }
            }
            .el-tabs__item:last-child {
                border-radius: 0 10px 0 0;
            }
        }
    }
    .el-tabs__active-bar {
        position: absolute;
        height: 45px;
        background: #f1f5f8;
        &::after,
        &::before {
            content: '';
            background: #f1f5f8;
            width: 40px;
            position: absolute;
            height: 45px;
            top: 0px;
            clip-path: url(#tabs);
            right: -40px;
        }
        &::before {
            left: -40px;
            right: auto;
            // 水平翻转
            transform: scaleX(-1);
        }
    }
    &.first .el-tabs__active-bar {
        &::before {
            transform: scaleX(1);
            left: -20px;
            clip-path: none;
            border-radius: 15px 0 0 0;
        }
    }
    &.fourth .el-tabs__active-bar {
        &::after {
            transform: scaleX(-1);
            right: -20px;
            clip-path: none;
            border-radius: 15px 0 0 0;
        }
    }
    .el-tabs__content {
        padding: 0;
        background: #f1f5f8;
        border-radius: 0 10px 10px 10px;
        height: calc(100vh - 140px);
        .el-tab-pane {
            position: relative;
            height: 100%;
            .hc-card-box.el-card {
                height: 100%;
                box-shadow: none;
                border-radius: initial;
            }
        }
    }
}
</style>