封装element-ui页签：el-tabs
封装成公共组件，方便拓展
公共组件代码
<template>
<div class="tabPane-container">
<el-tabs v-model="activeValue" @tab-click="tabClick" type="border-card" >
<el-tab-pane
v-for="item in tabList"
:key="item.name"
:label="item.label"
:name="item.name"
>
<!-- 这里使用具名插槽处理 -->
<slot :name="item.name"></slot>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data(){
return {
label:""
}
},
props: {
active: {
type: String,
default: 'first'
},
tabList: {
type: Array,
default: () => ([])
}
},
data () {
return {
activeValue: this.active
}
},
methods: {
tabClick () {
this.$emit('update:active', this.activeValue)
}
}
}
</script>
<style lang='scss' scoped>
::v-deep .el-tabs__content {
overflow: visible;
// height: 1000px;
}
::v-deep .el-tabs__header .el-tabs__item.is-active{
font-size: 20px;
transition: all 0.3s;
border-right:5px solid transparent;
border-left:5px solid transparent;
border-bottom:5px solid #fff;
}
::v-deep .el-tabs__item {
padding: 0 20px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: 500;
color: #303133;
position: relative;
}
</style>
父组件使用
<template>
<Tabs :tabList.sync="tabList" active.sync="first">
<template #first>
<!--el-tab-panen的内容写在这-->
</template>
<template #second>
<!--el-tab-panen的内容写在这-->
</template>
<template #third>
<!--el-tab-panen的内容写在这-->
</template>
</Tabs>
</template>
<script>
import Tabs from "@/components/Tabs"
export default {
name:"CourseInfo",
components:{
Tabs
},data(){
return {
tabList: [
{
label: "first",
name: 'first'
},
{
label: "second",
name: 'second'
},
{
label: "third",
name: 'third'
}
],
}
}
}
</script>
