1. 程式人生 > >vue element-ui Tabs 標簽頁實現【更多】功能

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

leave als def box span 公告 width ole 標簽

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>

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