欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue可自定義tab組件用法實例

 更新時間：2019年10月24日 16:34:40   作者：axel10  
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實例以及相關(guān)知識點，需要的朋友們參考下。

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

如何使用？

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. 啟動Vue Cli的serve，即可看到成果。

整個組件的設(shè)計思路借鑒了flutter的tabs組件，數(shù)據(jù)的渲染交由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

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

相關(guān)文章

  • Vue使用axios進(jìn)行g(shù)et請求拼接參數(shù)的2種方式詳解

    Vue使用axios進(jìn)行g(shù)et請求拼接參數(shù)的2種方式詳解

    axios中post請求都是要求攜帶參數(shù)進(jìn)行請求,這篇文章主要給大家介紹了關(guān)于Vue使用axios進(jìn)行g(shù)et請求拼接參數(shù)的2種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • vue中g(shù)et和post請求的區(qū)別點總結(jié)

    vue中g(shù)et和post請求的區(qū)別點總結(jié)

    在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請求的區(qū)別點總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。
    2021-12-12
  • 帶你了解前端的幾種包管理器(npm/pnpm等)

    帶你了解前端的幾種包管理器(npm/pnpm等)

    隨著前端工程化的應(yīng)用越來越廣，插件和包的管理也逐漸衍生出很多的管理器，常見的幾種包管理器如：npm、cnpm、yarn、pnpm，那你知道這些管理器之間有哪些區(qū)別嗎？我們一起來逐個認(rèn)識下它們
    2023-04-04
  • 基于better-scroll 實現(xiàn)歌詞聯(lián)動功能的代碼

    基于better-scroll 實現(xiàn)歌詞聯(lián)動功能的代碼

    BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件，BetterScroll 是使用純 JavaScript 實現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實現(xiàn)歌詞聯(lián)動功能，感興趣的朋友跟隨小編一起看看吧
    2020-05-05
  • ElementUI中el-dropdown-item點擊事件無效問題

    ElementUI中el-dropdown-item點擊事件無效問題

    這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的方法

    vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的方法

    這篇文章主要給大家介紹了關(guān)于vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,前端使用這個插件可以方便展現(xiàn)出json格式的數(shù)據(jù),下載引入使用代碼可直接使用,需要的朋友可以參考下
    2024-05-05
  • vue中img src 動態(tài)加載本地json的圖片路徑寫法

    vue中img src 動態(tài)加載本地json的圖片路徑寫法

    這篇文章主要介紹了vue中的img src 動態(tài)加載本地json的圖片路徑寫法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-04-04
  • 關(guān)于Vue的路由權(quán)限管理的示例代碼

    關(guān)于Vue的路由權(quán)限管理的示例代碼

    本篇文章主要介紹了關(guān)于Vue的路由權(quán)限管理的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • element table多層嵌套顯示的實踐

    element table多層嵌套顯示的實踐

    本文主要介紹了element table多層嵌套顯示的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue2(三)實現(xiàn)子菜單展開收縮，帶動畫效果實現(xiàn)方法

    Vue2(三)實現(xiàn)子菜單展開收縮，帶動畫效果實現(xiàn)方法

    這篇文章主要介紹了vue實現(xiàn)收縮展開效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論