vue element-ui Tabs 標簽頁實現【更多】功能

element-ui Tabs本身是沒有更多功能的，如果在外邊添加一個更多按鈕，又非常不好看，

而利用API中Tabs Attributes的before-leave勾子方法可以實現這個功能，

簡單PO出代碼

<template>
  <el-card class="box-card">
    <el-tabs :before-leave="moreState">
      <el-tab-pane label="最新">最新</el-tab-pane>
      <el-tab-pane label="新聞">新聞</el-tab-pane>
      <el-tab-pane label="公告">公告</el-tab-pane>
      <el-tab-pane label="活動">活動</el-tab-pane>
      <el-tab-pane name="more" class="more-btn"><span slot="label"><router-link to="/page/wholeList/wholeList">更多+</router-link></span></el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
    export default {
      name: "HomeNewsList",
      date(){
          return{
            // moreState:false,
          }
      },
      methods:{
        moreState(tab, event){
          if(tab == 'more'){
            console.log("/////",tab, event );
            return false;
          }
        }
      }
    }
</script>

<style scoped>
.box-card{
  width: 600px;
}
.box-card .el-tabs__item.is-top:last-child{
  color: #ff4949;
}

</style>