快捷導(dǎo)航

Vue可自定義tab組件用法實(shí)例

更新時(shí)間：2019年10月24日 16:34:40 作者：axel10

在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。

在工作中我們常常要用到tab組件，如果有用第三方組件庫(kù)的話一般都會(huì)有這個(gè)組件，但如果沒(méi)有使用第三方組件庫(kù)，或者想要自定義tab，那么或許這個(gè)無(wú)依賴的tab組件將會(huì)極大地節(jié)約你的開(kāi)發(fā)時(shí)間。

如何使用？

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 :style="{'height':'50px'}">
     <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() {
    
    // 創(chuàng)建控制器
    this.tabController = new TabController({ data: this.tabItems, tabScroll: true, initIndex: 1 });
   }
  }

4. 啟動(dòng)Vue Cli的serve，即可看到成果。

整個(gè)組件的設(shè)計(jì)思路借鑒了flutter的tabs組件，數(shù)據(jù)的渲染交由vue完成，之后的tab控制由TabController實(shí)例來(lái)完成。

github: https://github.com/axel10/cus-tabs

npm: https://www.npmjs.com/package/vue-cus-tabs

在線演示：https://vue-cus-tabs-axel10.now.sh

以上就是本次介紹的相關(guān)知識(shí)點(diǎn)內(nèi)容，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。

您可能感興趣的文章:

Vue
tab

相關(guān)文章

解決element-ui el-input賦值后不能編輯的問(wèn)題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vuex簡(jiǎn)單入門
本篇文章主要介紹了初步認(rèn)識(shí)理解Vuex，Vuex就是在一個(gè)項(xiàng)目中，提供唯一的管理數(shù)據(jù)源的倉(cāng)庫(kù),有興趣的可以了解一下
2017-04-04
vue頁(yè)面加載時(shí)的進(jìn)度條功能(實(shí)例代碼)
這篇文章主要介紹了vue頁(yè)面加載時(shí)的進(jìn)度條功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
在導(dǎo)入.vue文件的時(shí)候,ts報(bào)錯(cuò)提示:找不到模塊“@/Layout/index.vue”或其相應(yīng)的類型聲明問(wèn)題
這篇文章主要介紹了在導(dǎo)入.vue文件的時(shí)候,ts報(bào)錯(cuò)提示:找不到模塊“@/Layout/index.vue”或其相應(yīng)的類型聲明問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue-router兩種模式區(qū)別及使用注意事項(xiàng)詳解
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項(xiàng),結(jié)合實(shí)例形式詳細(xì)分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項(xiàng),需要的朋友可以參考下
2019-08-08
.html頁(yè)面引入vue并使用公共組件方式
這篇文章主要介紹了.html頁(yè)面引入vue并使用公共組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue中provide、inject的使用方法案例詳解
本教程是介紹如何在vue中使用provide和inject,在 Vue 中,provide 和 inject 是用于實(shí)現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,對(duì)vue中provide、inject的使用方法感興趣的朋友一起看看吧
2024-02-02
element?el-select下拉框選擇失效解決辦法
el-select即選擇器用于從若干個(gè)候選項(xiàng)中選擇其中一個(gè)(或者多個(gè)),在傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下
2023-08-08
vue打印瀏覽器頁(yè)面功能的兩種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue打印瀏覽器頁(yè)面功能的兩種實(shí)現(xiàn)方法,這個(gè)功能其實(shí)也是自己學(xué)習(xí)到的,做完也有一段時(shí)間了,一直想記錄總結(jié)一下,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長(zhǎng)，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下
2022-09-09