选项卡切换组件,常用于平级区域大块内容的的收纳和展现。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>
记得使用">>>"符号涌入,否则不会生效的!