完成tab基础组件

src/demo.vue

@@ -1,8 +1,5 @@
 <template>
  <div>
- <!--
- <tabs selected="selectedTab" @update:selected="selectedTab = $event">
- -->
  <tabs :selected.sync="selectedTab">
  <tabs-head>
  <tabs-item name="woman">美女</tabs-item>

src/main.js

@@ -7,6 +7,7 @@ new Vue({
  render: h => h(Demo)
 }).$mount('#app');
 
+
 // import Vue from 'vue';
 // import Button from './button';
 // import Icon from './icon';

src/tab/readme.md

@@ -0,0 +1,16 @@
+### 使用
+
+```
+<tabs selected="tab1">
+ <tabs-head>
+ <tabs-item name="tab1">美女</tabs-item>
+ <tabs-item name="tab2">财经</tabs-item>
+ <tabs-item name="tab3">体育</tabs-item>
+ </tabs-head>
+ <tabs-body>
+ <tabs-pane name="tab1">美女相关咨询</tabs-pane>
+ <tabs-pane name="tab2">财经相关咨询</tabs-pane>
+ <tabs-pane name="tab3">体育相关咨询</tabs-pane>
+ </tabs-body>
+</tabs>
+```

src/tab/tabs-head.vue

@@ -1,6 +1,9 @@
 <template>
  <div class="tabs-header">
- <slot></slot> 
+ <slot></slot>
+ <div class="actions-wrapper">
+ <slot name="actions"></slot>
+ </div>
  </div>
 </template>
 
@@ -17,10 +20,15 @@ export default {
 
 <style lang="scss" scoped>
 $tab-height: 40px;
+$border-color: #ddd;
 .tabs-header {
  display: flex;
  height: $tab-height;
- border: 1px solid red;
  justify-content: flex-start;
+ align-items: center;
+ border-bottom: 1px solid $border-color;
+ > .actions-wrapper {
+ margin-left: auto;
+ }
 }
 </style>

src/tab/tabs-item.vue

@@ -14,29 +14,28 @@ export default {
  }
  },
  props: {
- name: String,
+ name: String|Number,
  required: true
  },
+ computed: {
+ classes() {
+ return {
+ active: this.active
+ }
+ }
+ },
  created() {
  this.eventBus.$on('update:selected', (name) => {
  if(name === this.name) {
- // console.log(`${this.name}我被选中了`)
  this.active = true
  }else {
- // console.log(`${this.name}我没被选中了`)
  this.active = false
  }
  })
  },
- computed: {
- classes() {
- return {
- active: this.active
- }
- }
- },
  methods: {
  xxx() {
+ console.log(this.name)
  this.eventBus.$emit('update:selected', this.name)
  }
  }
@@ -49,12 +48,12 @@ export default {
  flex-shrink: 0;
  padding: 0 1em;
  cursor: pointer;
- border: 1px solid green;
  height: 100%;
  display: flex;
  align-items: center;
  &.active {
- background: red;
+ color: blue;
+ border-bottom: 1px solid blue;
  }
 }
 </style>

src/tab/tabs-pane.vue

@@ -8,17 +8,17 @@
 export default {
  name: 'UITabsPane',
  inject: ['eventBus'],
+ data() {
+ return {
+ active: false
+ }
+ },
  props: {
  name: {
  type: String,
  required: true
  }
  },
- data() {
- return {
- active: false
- }
- },
  computed: {
  classes() {
  return {
@@ -27,12 +27,11 @@ export default {
  }
  },
  created() {
+ // name是this.eventBus.$emit传入的值
  this.eventBus.$on('update:selected', (name) => {
  if(name === this.name) {
- // console.log(`pane ${this.name}我被选中了`)
  this.active = true
  }else {
- // console.log(`pane ${this.name}我没被选中了`)
  this.active = false
  }
  })
@@ -43,8 +42,9 @@ export default {
 
 <style lang="scss" scoped>
 .tabs-pane {
+ padding: .8em;
  &.active {
- background: red;
+ font-size: 16px; 
  }
 }
 </style>

src/tab/tabs.vue

@@ -1,7 +1,6 @@
 <template>
  <div class="tabs">
  <slot></slot>
- <slot name="actions"></slot> 
  </div>
 </template>
 
@@ -33,15 +32,17 @@ export default {
  eventBus: this.eventBus
  }
  },
- created() {
- this.$emit('update:selected', this.selected)
+ mounted() {
+ // 通知当前选中的tab
+ this.eventBus.$emit('update:selected', this.selected)
  }
 }
 </script>
 
 
 <style lang="scss" scoped>
 .tabs {
-
+ padding-top: 10px;
+ padding-left: 5px;
 }
 </style>