vue element-ui Tabs 标签页实现更多功能

Posted 2021-01-22 zhixi

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>