Pixinlei-tabs NPM

下载

npm i pixinlei-tabs

引入

import Vue from 'vue'
import App from './App.vue'
import Tabs from 'pixinlei-tabs'
import "babel-polyfill"
Vue.config.productionTip = false

Vue.use(Tabs)
new Vue({
  render: h => h(App),
}).$mount('#app')

使用

<tabs />

配置项

  props: {
    speed: { // 横线移动的速度
      type: Number,
      default: 10
    },
    list: { // 传入的列表项
      type: Array,
      default: () => ['用户管理', '配置管理', '角色管理', '定时任务补偿']
    },
    width: { // tabs的整个的宽度
      type: [Number, String],
      default: 100
    },
    height: { // tabs的整个的高度
      type: [Number, String],
      default: 5.91
    },
    styles: { // tabs的整体的样式配置
      type: Object,
      default: () => {
        return {}
      }
    },
    activeItem: { // 选中的那一项的样式配置
      type: Object,
      default: () => {
        return {
          color: '#303133',
          fontFamily: 'PingFangSC-Medium, PingFang SC',
          fontWeight: 500
        }
      }
    },
    lineWidth: { // 横线的宽度
      type: [String, Number],
      default: 5
    },
    lineHeight: { //横线的高度
      type: [String, Number],
      default: 3
    },
    lineStyle: { // 横线的样式
      type: Object,
      default: () => {
        return {
          background: '#3F9EFF',
          bottom: `0px`
        }
      }
    }
  },