vue-cus-tabs v0.1.2

Introduction

Vue-Cus-Tabs implements most of the common tab requirements, and you only need a simple configuration to render a tab on the page. Vue-Cus-Tabs has no dependencies other than Vue.

Vue-Cus-Tabs实现了大部分常见的tab需求，你只需要简单配置即可在页面上呈现一个tab。Vue-Cus-Tabs除了Vue以外没有任何依赖项。

demo:https://vue-cus-tabs-axel10.now.sh

Example

install:

npm i vue-cus-tabs -S

template:

    <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>

script:

  import Vue from 'vue'
  import 'vue-cus-tabs/style/index.css'
  import { installCusTabs } from 'vue-cus-tabs';
  Vue.use(installCusTabs);
  
  import { TabController } from 'vue-cus-tabs';
  import 'vue-cus-tabs/style/index.css'
 
  Vue.use(CusTabs);

  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 });
    }
  }

Configuration

Constructor:

indicatorOptions:

instance method:
实例方法：