[feat] add tab

src/meui/components/tab/index.js

@@ -0,0 +1,3 @@
+import Tab from './src/tab.vue'
+import TabItem from './src/tab-item.vue'
+export {Tab, TabItem}

src/meui/components/tab/src/tab-item.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="tab-item" @click="onItemClick">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'me-tab-item',
+  methods:{
+    onItemClick() {
+      this.$emit('on-change', this.currentIndex)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
+

src/meui/components/tab/src/tab.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="tab">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'me-tab',
+  mounted() {
+    for(let i = 0; i < this.$children.length; i++) {
+      this.$children[i].currentIndex = i
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .tab
+    display flex
+    background #FFF
+    border-bottom 1px solid #F1F1F1
+    .tab-item
+      flex 1
+      text-align center
+      padding 20px 0
+      &:active
+        background #F8F8F8
+
+</style>
+

src/meui/index.js

@@ -18,6 +18,7 @@ import ActionSheet from './components/actionsheet';
 
 import {CityPicker} from './components/cityPicker';
 
+import {Tab, TabItem} from './components/tab';
 import {Popup} from './components/popup';
 import {Swiper} from './components/swiper';
 import PreviewImage from './components/previewImage';
@@ -40,6 +41,8 @@ const install = function (Vue) {
 
   Vue.component(CityPicker.name, CityPicker);
 
+  Vue.component(Tab.name, Tab);
+  Vue.component(TabItem.name, TabItem);
   Vue.component(Popup.name, Popup);
   Vue.component(Swiper.name, Swiper);
 

src/pages/index/index.vue

@@ -71,7 +71,7 @@ export default {
           title:'基础组件',
           active:false,
           list:[
-            {title:'Tab - 选项卡',path:'/Index/Popup'},
+            {title:'Tab - 选项卡',path:'/Index/Tab'},
             {title:'Popup - 弹层',path:'/Index/Popup'},
             {title:'Swiper - 轮播',path:'/Index/Swiper'},
             {title:'Lightbox - 图片查看',path:'/Index/PreviewImage'},

src/pages/tab/tab.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="view-page">
+    <me-tab>
+      <me-tab-item @on-change="handler">Tab1</me-tab-item>
+      <me-tab-item @on-change="handler">Tab2</me-tab-item>
+      <me-tab-item @on-change="handler">Tab3</me-tab-item>
+    </me-tab>
+  </div>
+</template>
+
+<script>
+export default {
+  methods:{
+    handler(value){
+      console.log(value)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  h1
+    padding 20px
+</style>
+
+

src/router/index.js

@@ -14,6 +14,7 @@ import Index from '@/pages/index/index';
 
   import CityPicker from '@/pages/cityPicker/cityPicker';
 
+  import Tab from '@/pages/tab/tab';
   import Popup from '@/pages/popup/popup';
   import Swiper from '@/pages/swiper/swiper';
   import PreviewImage from '@/pages/previewImage/previewImage';
@@ -39,6 +40,7 @@ var router = new Router({
       {path: 'PullRefresh',component: PullRefresh,meta:{title:'PullRefresh'}},
       {path: 'CityPicker',component: CityPicker,meta:{title:'CityPicker'}},
       {path: 'Flex',component: Flex,meta:{title:'Flex'}},
+      {path: 'Tab',component: Tab,meta:{title:'Tab'}},
       {path: 'Popup',component: Popup,meta:{title:'Popup'}},
       {path: 'Swiper',component: Swiper,meta:{title:'Swiper'}},
       {path: 'PreviewImage',component: PreviewImage,meta:{title:'PreviewImage'}},