如何在Vue中自定义iView TabPane的标签宽度？

要实现你想要的TabPane标签加宽效果，通过自定义CSS就能轻松搞定，这里给你整理了几种实用方案，适配不同场景：

方案一：全局统一设置宽标签 #

如果你的项目里所有卡片式Tabs都需要这个宽标签效果，直接在全局样式文件（比如global.css）里添加以下样式即可：

/* 针对卡片类型的Tabs标签 */
.ivu-tabs-card > .ivu-tabs-nav .ivu-tabs-tab {
    width: 150px; /* 替换成你需要的宽度值 */
    text-align: center; /* 让标签文字居中，视觉效果更协调 */
}

方案二：局部页面单独设置（Scoped样式） #

如果只是某个页面的Tabs需要这个效果，在Vue单文件组件的<style scoped>中，需要用深度选择器来穿透scoped限制，才能修改iView组件内部的样式：

<template>
  <Tabs type="card">
    <TabPane label="标签一">标签一的内容</TabPane>
    <TabPane label="标签二">标签二的内容</TabPane>
    <TabPane label="标签三">标签三的内容</TabPane>
  </Tabs>
</template>

<style scoped>
/* 不同Vue版本/预处理器可选择::v-deep、/deep/或>>>，这里用::v-deep适配多数场景 */
::v-deep .ivu-tabs-card > .ivu-tabs-nav .ivu-tabs-tab {
    width: 150px;
    text-align: center;
}
</style>

方案三：自定义标签模板（支持差异化宽度） #

如果需要给不同标签设置不同宽度，或者要更灵活的标签样式，可以用TabPane的label插槽来自定义内容，给每个标签外层加自定义class：

<template>
  <Tabs type="card">
    <TabPane>
      <template #label>
        <div class="custom-tab">标签一</div>
      </template>
      标签一的内容
    </TabPane>
    <TabPane>
      <template #label>
        <div class="custom-tab wide-tab">标签二</div>
      </template>
      标签二的内容
    </TabPane>
    <TabPane>
      <template #label>
        <div class="custom-tab">标签三</div>
      </template>
      标签三的内容
    </TabPane>
  </Tabs>
</template>

<style scoped>
.custom-tab {
    width: 120px;
    text-align: center;
}
.wide-tab {
    width: 180px; /* 给特定标签设置更宽的尺寸 */
}
/* 覆盖默认的内边距，避免自定义标签内容溢出 */
::v-deep .ivu-tabs-card > .ivu-tabs-nav .ivu-tabs-tab {
    padding: 0;
}
</style>

小提示： #

• 设置text-align: center是因为iView默认标签文字左对齐，加宽后居中会更美观；
• 用scoped样式时必须加深度选择器，否则样式无法作用到iView的内部DOM元素；
• 插槽方案自由度最高，适合需要个性化设置的场景。

内容的提问来源于stack exchange，提问作者chucklai