溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在工作中我們常常要用到tab組件，如果有用第三方組件庫的話一般都會有這個組件，但如果沒有使用第三方組件庫，或者想要自定義tab，那么或許這個無依賴的tab組件將會極大地節約你的開發時間。
如何使用？
1. 首先先安裝：
npm i vue-cus-tabs -S
2. 在new vue之前引入樣式并use一下VueCusTab：
import 'vue-cus-tabs/style/index.css'
import { installCusTabs } from 'vue-cus-tabs';
Vue.use(installCusTabs);
3. 在代碼中引入組件：
<CusTabWrap>
<template v-slot:tabBar>
<CusTabBar :>
<CusTabItem v-for="item in tabItems" :key="item.title">
{{item.title}}
</CusTabItem>
</CusTabBar>
</template>
<template v-slot:tabContainer>
<CusTabContainer>
<CusTabContainerItem v-for="item in tabItems">
<ul>
<li v-for="data in item.data">
{{data.title}}
</li>
</ul>
</CusTabContainerItem>
</CusTabContainer>
</template>
</CusTabWrap>
import { TabController } from 'vue-cus-tabs';
import Vue from 'vue'
export default class Test extends Vue{
public tabItems = [
{ title: '新聞', type: 'list', data: [{ img: '', title: 'list item title' }] },
{ title: '視頻', type: 'block', data: [{ video: '', title: 'list item title' }] },
{ title: '視頻1', type: 'block', data: [{ video: '', title: 'list item title' }] },
];
public tabController?: TabController;
public mounted() {
// 創建控制器
this.tabController = new TabController({ data: this.tabItems, tabScroll: true, initIndex: 1 });
}
}
4. 啟動Vue Cli的serve，即可看到成果。
整個組件的設計思路借鑒了flutter的tabs組件，數據的渲染交由vue完成，之后的tab控制由TabController實例來完成。
github: https://github.com/axel10/cus-tabs
npm: https://www.npmjs.com/package/vue-cus-tabs
在線演示：https://vue-cus-tabs-axel10.now.sh
以上就是本次介紹的相關知識點內容，感謝大家的學習和對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
