vue element-ui Tabs 標簽頁實現【更多】功能
阿新 • • 發佈:2018-11-26
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> exportdefault { 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 標簽頁實現【更多】功能