使用vue开发自定义tabs标签页组件

共涉及基础组件文件 tabs.vue pane.vue 和样式文件 tabs.scss 和案例页面文件 index.vue 四个文件

完整代码可到gitee下载

话不多说直接上代码：

tabs.vue 内容如下：

<template>
  <div class="tabs" :class="{'tabs-border': showBorder}">
    <div :class="'tabs-' + getTabsType() + '-bar'">
      <div v-for="(item,index) in navList" :class="tabCls(item)" @click="handleChange(index)" :style="getTabFontStyle()">
        {{ item.label }}
        <span v-if="ifShowClose(item)" class="close icon" @click.stop="closeTab(index)" />
      </div>
    </div>
    <div class="tabs-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    value: {
      type: [String, Number]
    },
    border: {
      type: Boolean,
      default: false
    },
    tabsType: {
      type: String,
      default: 'tab'
    },
    fontSize: {
      type: [String, Number],
      default: 16
    },
    fontColor: {
      type: String,
      default: '#000000'
    }
  },
  data() {
    return {
      defType: ['tab', 'card', 'card2', 'brief'],
      currentValue: this.value,
      showBorder: this.border,
      navList: []
    }
  },
  watch: {
    value: function(val) {
      this.currentValue = val
    },
    currentValue: function() {
      this.updateStatus()
    }
  },
  methods: {
    tabCls: function(item) {
      var active = ''
      var tabsType = this.getTabsType()
      var tabsBaseClass = 'tabs-' + tabsType

      if (item.name === this.currentValue) {
        active = 'tabs-' + tabsType + '-active'
      }

      return [
        tabsBaseClass,
        active
      ]
    },
    getTabs() {
      // 通过遍历子组件，得到所有的pane组件
      return this.$children.filter(function(item) {
        return item.$options.name === 'Pane' || item.$options.name === 'pane'
      })
    },
    updateNav() {
      this.navList = []
      var _this = this
      this.getTabs().forEach(function(pane, index) {
        _this.navList.push({
          label: pane.label,
          name: pane.name || index,
          closable: pane.closable
        })
        if (!pane.name) {
          pane.name = index
        }
        if (index == 0) {
          if (!_this.currentValue) {
            _this.currentValue = pane.name || index
          }
        }
      })
      this.updateStatus()
    },
    updateStatus() {
      var _this = this
      // 显示当前选中的tab对应的pane组件
      _this.getTabs().forEach(function(tab) {
        tab.show = tab.name === _this.currentValue
        // return
      })
    },
    handleChange: function(index) {
      var nav = this.navList[index]
      var name = nav.name
      // 更新当前选择的tab
      this.currentValue = name
      // 更新value
      this.$emit('input', name)
    },
    ifShowClose(item) {
      // 是否显示关闭标签按钮
      return item.closable
    },
    // 点击关闭按钮触发的事件
    closeTab(index) {
      // console.log(this.navList[index].name, this.currentValue);
      // 如果关闭的是当前选择的tab，则将currentValue转到前一个tab
      if (this.navList[index].name == this.currentValue) {
        let toIndex = index - 1
        toIndex = toIndex >= 0 ? toIndex : this.navList.length + toIndex
        console.log(toIndex)
        this.currentValue = this.navList[toIndex].name
      }
      // 关闭当前标签页
      this.navList.splice(index, 1)
    },
    // 根据组件属性tabsType 设置tabs头部样式
    getTabsType() {
      if (this.$data.defType.indexOf(this.tabsType) === -1) {
        return 'tab'
      }
      return this.tabsType
    },
    // 根据组件属性fontSize 设置tab 字体大小和颜色
    getTabFontStyle() {
      if (!/^#[0-9a-fA-F]{6}$/.test(this.fontColor)) {
        this.fontColor = '#000000'
      }
      if (!/^[1-3][0-9]$/.test(this.fontSize) || this.fontSize < 12) {
        this.fontSize = 16
      }
      return 'font-size: ' + this.fontSize + 'px; color: ' + this.fontColor
    }
  }
}
</script>
<style scoped>
</style>

pane.vue 内容如下：

<template>
  <div :class="getCls()">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Pane',
  props: {
    name: {
      type: String
    },
    label: {
      type: String,
      default: ''
    },
    closable: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      show: true
    }
  },
  watch: {
    label() {
      this.updateNav()
    }
  },
  mounted() {
    this.updateNav()
  },
  methods: {
    updateNav() {
      this.$parent.updateNav()
    },
    // 决定pane是否显示
    getCls() {
      return [
        'pane',
        {
          'pane-active': this.show
        }
      ]
    }
  }
}
</script>

<style scoped>
</style>

tabs.scss 内容如下：

[v-cloak] {
    display: none;
}
.tabs {
    margin: 3px;
    font-size: 14px;
    color: #657180;
}
.tabs-border {
    border-width: 1px;
    border-radius: 2px;
    border-style: solid;
    border-color: #e6e6e6;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%)
}
.tabs-tab-bar:after {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    margin-top: -1px;
    background: #d7dde4;
}
.tabs-tab {
    cursor: pointer;
    padding: 6px 16px;
    margin-right: 6px;
    background: #fff;
    position: relative;
    display: inline-block;
    border: 1px solid #d7dde4;
}
.tabs-tab-active {
    color: #3399ff;
    border-top: 1px solid #3399ff;
    border-bottom: 1px solid #fff;
}
.tabs-tab-active:before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    display: block;
    position: absolute;
    background: #3399ff;
}
/*brief 风格的tabs 样式 start*/
.tabs-brief-bar:after {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    margin-top: -1px;
    background: #d7dde4;
}
.tabs-brief {
    cursor: pointer;
    padding: 8px 16px;
    background: #fff;
    position: relative;
    display: inline-block;
}
.tabs-brief-active {
    border-top: none;
    font-weight: 800;
    color: #3399ff !important;
    border-bottom: 1px solid #d7dde4;
}
.tabs-brief-active:after {
    content: '';
    left: 0;
    right: 0;
    height: 2px;
    bottom: -3px;
    display: block;
    position: absolute;
    background: #3399ff;
}
/*brief 风格的tabs 样式 end*/

/*card 风格的tabs 样式 start*/
.tabs-card-bar {
    background: #F1F1F1;
}
.tabs-card {
    cursor: pointer;
    padding: 8px 16px;
    position: relative;
    display: inline-block;
}
.tabs-card-active {
    font-weight: 800;
    color: #3399ff !important;
}
/*card 风格的tabs 样式 end*/

/*card2 风格的tabs 样式 start*/
.tabs-card2-bar {
    background: #F1F1F1;
}
.tabs-card2 {
    cursor: pointer;
    padding: 8px 16px;
    position: relative;
    display: inline-block;
}
.tabs-card2-active {
    font-weight: 800;
    background: #ffffff;
}
/*card 风格的tabs 样式 end*/

.tabs-content {
    min-height: 100px;
    padding: 6px;
}
.pane {
    height: 0;
    width: 100%;
    visibility: hidden;
    transition: all .5s ease-in;
    transform: translateX(-100%);
}
.pane-active {
    visibility: visible;
    transform: translateX(0);
}

/* 关闭按钮样式 start*/
.close.icon {
    width: 11px;
    height: 11px;
    color: #000;
    margin-left: 5px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
.close.icon:hover {
    background: #eee;
}
.close.icon:before {
    content: '';
    top: 5px;
    width: 11px;
    height: 1px;
    position: absolute;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.close.icon:after {
    content: '';
    top: 5px;
    width: 11px;
    height: 1px;
    position: absolute;
    background-color: currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}  
/* 关闭按钮样式 end*/

index.vue 内容如下：

<template>
  <div class="app-main">
    <tabs v-model="activePane" 
　　　　　　tabs-type="card" // 标签页类型 非必填 可选 tab/brief/card/card2 默认tab
　　　　　　:font-size="16" // 标签头部字体大小 数值型 非必填 默认16
　　　　　　font-color="#888888" // 标签头部字体颜色 非必填 默认#000000
　　　　　　:border="true" // 是否显示外边框 非必填 默认false
　　>
      <pane label="标签一" // 标签页名称 必填
　　　　　　　name="1" //标签页定位符 非必填 为空时取标签页的索引值进行定位
　　　　　　  :closable="false" // 标签页是否可以关闭 非必填  默认false
　　　>
        <tabs v-model="activePane1" tabs-type="card" :font-size="16" :border="true">
          <pane label="内标签一" name="11">
            标签一 内部标签页内容一
          </pane>
          <pane label="内标签二" name="12">
            标签一 内部标签页内容二
          </pane>
          <pane label="内标签三" name="13">
            标签一 内部标签页内容三
          </pane>
        </tabs>
      </pane>

      <pane label="标签二" name="2" :closable="false">
        <tabs v-model="activePane2" tabs-type="card2" :font-size="16" :border="true">
          <pane label="内标签一" name="21">
            标签二 内部标签页内容一
          </pane>
          <pane label="内标签二" name="22">
            标签二 内部标签页内容二
          </pane>
          <pane label="内标签三" name="23">
            标签二 内部标签页内容三
          </pane>
        </tabs>
      </pane>

      <pane label="标签三" name="3">
        <tabs v-model="activePane3">
          <pane label="内标签一" name="31">
            标签三 内部标签页内容一
          </pane>

          <pane label="内标签二" name="32">

            <tabs v-model="activePane32" tabs-type="brief">
              <pane label="内标签一" name="32">
                标签三 内部标签二的内部标签页内容一
              </pane>
              <pane label="内标签二" name="322">
                标签三 内部标签二的内部标签页内容二
              </pane>
              <pane label="内标签三" name="323">
                标签三 内部标签二的内部标签页内容三
              </pane>
            </tabs>
          </pane>

          <pane label="内标签三" name="33">

            <tabs v-model="activePane33" tabs-type="brief" :border="true">
              <pane label="内标签一" name="331">
                标签三 内部标签三的内部标签页内容一
              </pane>
              <pane label="内标签二" name="332">
                标签三 内部标签三的内部标签页内容二
              </pane>
              <pane label="内标签三" name="333">
                标签三 内部标签三的内部标签页内容三
              </pane>
            </tabs>
          </pane>
        </tabs>
      </pane>
    </tabs>
  </div>
</template>

<script>
// 引入相应组件
import Tabs from '@/components/tabs/tabs.vue'
import Pane from '@/components/tabs/pane.vue'
export default {
  name: 'Test2',
  components: {
    Tabs,
    Pane
  },
  data() {
    return {
      activePane: '3',
      activePane1: '11',
      activePane2: '22',
      activePane3: '33',
      activePane32: '322',
      activePane33: '333'
    }
  }
}
</script>
// 引入标签页样式文件
<style>
@import '../../styles/tabs.scss';// 根据实际应用填写此路径
</style>

tabs-type 不写 或 tabs-type 为空 或 tabs-type="tab"时：

tabs-type="brief"时：

tabs-type="brief" 且 :border="true" 时：

tabs-type="card" 且 :border="true" 时：

tabs-type="card2"且 :border="true"时：

 完整代码文件已上传gitee，传送门

转发自 https://juejin.cn/post/6844903881965568007 以上为在原作基础上略作改动
第一次编写发布博客 如有不足之处还望多多指教