iview tabs 选项卡设置自定义样式

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。iview里面我们可以来自定义tabs切换的样式。

默认的就是这种;

<template>
    <Tabs type="card" closable @on-tab-remove="handleTabRemove">
        <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
        <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
        <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
    </Tabs>
</template>
<script>
    export default {
        data () {
            return {
                tab0: true,
                tab1: true,
                tab2: true
            }
        },
        methods: {
            handleTabRemove (name) {
                this['tab' + name] = false;
            }
        }
    }
</script>

我们现在来做一下自定义样式：

 

 只需要在样式中加入如下代码：

<style scoped>
  .card-tabs-search >>>.ivu-tabs.ivu-tabs-card {
    /*border-radius:8px 8px 0px 0px;*/
    border-color:#1890ff;
    /*border-width:2px*/
  }

  .card-tabs-search >>>.ivu-tabs.ivu-tabs-card >.ivu-tabs-bar .ivu-tabs-tab-active{
    background:#3399ff;
    color: #f5f7f9;
    height:52px;
    border-color:#3388ff;
    /*border-width:2px*/
  }
</style>

记得使用">>>"符号涌入，否则不会生效的！