el-tabs修改

el-tabs样式

现有的element的组件库已经能满足大部分项目中的需求，但是当出现一些奇奇怪怪的需求时，我们就需要对element组件进行修改。例如下面的需求。

在element组件中，动画条实在标签的下方，但是出现一个需求，需要把动画条覆盖全部标签的时候呢。我们该怎么做。
首先打开F12控制台，我们可以看到动画条是有单独的一个class类名为el-tabs__active-bar的div组成的。

该div盒子的宽度是element组件内部通过计算各个标签的宽度减去padding而得到的。也就是随着标签宽度的变化而变化。如果要实现上面的需求，就需要重新设置每个标签栏的宽度。如果标签栏内的文字数量相同也就算了，如果不同呢？比如说标签栏1、标签栏目2，此时就无法直接定死标签栏的宽度。而且el-tabs组件能给到的只有el-tabs和el-tab-pane，直接将:style="{}"动态样式作用在el-tab-pane上又不行。所以只能在el-tabs组件上加上一个ref，获取该组件。设置栏目的宽度。代码如下：

//通过js设置tab-pane的宽度
const setWidth = () => {
    props.tabs.forEach((sitem, sindex) => {
        tabLength.value = sitem.label.length
        let element = el_tabs.value.$el.children[0].children[0].children[0].children[0].children[sindex + 1]
        let fontSize = Number(window.getComputedStyle(element, null).getPropertyValue("font-size").split('px')[0]);
        let paddingLoR = Number(window.getComputedStyle(element, null).getPropertyValue("padding-left").split('px')[0]) || Number(window.getComputedStyle(element, null).getPropertyValue("padding-right").split('px')[0]);
        element.style.width = (tabLength.value + 4.8) * fontSize + paddingLoR + 'px'
        // element.style.height = fontSize*15/7+'px'
        // element.style.lineHeight=fontSize*15/7+'px'
    })
}

想必也发现了另外一个神奇的事情，原生的el-tabs栏目的宽度是根据字体大小也就是font-size去设置的。此时，在代码中也是根据font-size去设置栏目的宽度，示例中使用4.8去调节，可以修改这个数字去修改栏目的宽度。贴一下模板代码

<template>
    <div class="tabs" v-if="props.tabs.length > 1">
        <el-tabs v-model="activeName" @tab-change="tabChange" ref="el_tabs">
            <el-tab-pane :label="item.label" :name="item.value" v-for="item in tabs" :key="item.value">
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

而其他的css样式如下：

.tabs {
    padding: 8px 10.5px;
    display: flex;
    position: relative;

    ::v-deep .el-tabs {
        .el-tabs__header {
            margin: 0;
        }

        .el-tabs__active-bar {
            height: 100%;
            background: #F2F3F8;
            border-radius: 32px;
        }

        .el-tabs__item {
            font-size: 14px;
            text-align: center;
            z-index: 1;
        }

        .el-tabs__nav-wrap::after {
            content: none;

        }
    }
}