@hz_yujin/vue2-base-tabs

基于 Vue 2.6 / 2.7 + Element UI el-tabs 的样式包装器。

• Tabs 逻辑全部复用 Element（切换、closable / editable、beforeLeave、位置等）
• 本包只统一皮肤与尺寸预设
• 子面板请继续使用 el-tab-pane（Element 按 ElTabPane 收集面板，且依赖 $parent）

安装

npm install @hz_yujin/vue2-base-tabs element-ui

注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue2BaseTabs from '@hz_yujin/vue2-base-tabs'
import '@hz_yujin/vue2-base-tabs/style.css'

Vue.use(ElementUI)
Vue.use(Vue2BaseTabs)
// 可选：Vue.use(Vue2BaseTabs, { prefix: 'Hz' })

基础用法

<template>
  <ProTabs v-model="active" @tab-click="onClick">
    <el-tab-pane label="概况" name="overview">概况内容</el-tab-pane>
    <el-tab-pane label="明细" name="detail">明细内容</el-tab-pane>
    <el-tab-pane label="设置" name="settings">设置内容</el-tab-pane>
  </ProTabs>
</template>

<script>
export default {
  data() {
    return { active: 'overview' }
  },
  methods: {
    onClick(tab) {
      console.log(tab.name)
    },
  },
}
</script>

Props

| Prop | 类型 | 默认 | 说明 | |------|------|------|------| | value | String / Number | — | 当前激活 name，配合 v-model | | activeName | String | — | 兼容 Element；未传 value 时使用 | | type | String | '' | '' / card / border-card | | closable | Boolean | false | 标签是否可关闭 | | addable | Boolean | false | 是否可新增 | | editable | Boolean | false | 同时可增删 | | tabPosition | String | 'top' | top / right / bottom / left | | beforeLeave | Function | — | 切换前钩子，返回 false 或 rejected Promise 可阻止 | | stretch | Boolean | false | 标签宽度是否自撑满 | | size | String | 'medium' | 皮肤间距：small / medium / large | | customClass | String | '' | 根节点额外 class |

未列出的属性会通过 $attrs 透传给 el-tabs。

Events

| 事件 | 参数 | 说明 | |------|------|------| | input / update:value | (name) | 激活项变化（v-model） | | tab-click | (tab, event) | 点击标签 | | tab-remove | (name) | 关闭标签 | | tab-add | — | 点击新增 | | edit | (targetName, action) | add / remove |

样式变量

可在业务侧覆盖：

:root {
  --pro-tabs-active: #1890ff;
  --pro-tabs-text: #606266;
  --pro-tabs-text-active: #1890ff;
  --pro-tabs-border: #e4e7ed;
  --pro-tabs-bg: #ffffff;
  --pro-tabs-card-bg: #f5f7fa;
  --pro-tabs-radius: 8px;
}

Vue CLI 3 / webpack 4

若构建报错解析现代语法，请将本包加入 transpileDependencies：

transpileDependencies: ['@hz_yujin/vue2-base-tabs']