vue tabs 控件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Aaronzzq/article/details/86495944

<template>

<div class="my-tabs">

<div class="tabs-bar-nav">

<div class="tabs-tab" v-for="tab in tabList"

:key="tab.index"

:class="[tabIndex == tab.index ? 'tabs-active' : '']"

@click="changeTab(tab)">

{{tab.name}}

</div>

</div>

<div class="tabs-content">

<slot></slot>

</div>

</div>

</template>

<script>

export default {

name: 'MyTabs',

props:

{

tabList: Array,

tabIndex: Number

},

data () {

return {

}

},

methods: {

changeTab: function (tab) {

this.$emit('changeTab', tab)

}

}

}

</script>

<style scoped lang="less">

.my-tabs {

font-size: 14px;

color: #444;

}

.tabs-bar-nav {

display: flex;

flex-direction: row;

width: 100%;

overflow-x: scroll;

overflow-y: hidden;

white-space: nowrap;

}

.tabs-tab {

flex: 1;

display:inline-block;

box-sizing: border-box;

padding: 5px ;

text-align: center;

}

.tabs-active {

// border-top: 1px solid pink;

// border-left: 1px solid pink;

// border-right: 1px solid pink;

border-bottom: 1px solid pink;

}

.tabs-content {

padding: 10px;

}

</style>

使用方式：

<!-- Tabs -->
    <my-tabs :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab">
      <keep-alive>
        <component :is="currentContent">
        </component>
      </keep-alive>
    </my-tabs>

import MyTabs from '../componets/tabs.vue'
import One from './one.vue'
import Two from './two.vue'

export default {
  name: 'Home',
  components: {
    MyTabs,
    'one': One,
    'two': Two
  },
  data () {
    return {
      tabIndex: 0,
      currentContent: 'one',
      tabList: [
        {
          index: 0,
          name: '选项一',
          component: 'one'
        },
        {
          index: 1,
          name: '选项二',
          component: 'two'
        }
      ]
    }
  },
  methods: {
     // 切换选项卡
    changeTab: function (tab) {
      this.tabIndex = tab.index
      this.currentContent = tab.component
    }
  }
}