element ui tabs 鼠标放在tab上文字左右滑动

element ui tabs 鼠标放在tab上文字左右滑动

 

// 选项卡关闭按钮 - 未优化版
$tabs-width: 20px;
// 都不显示关闭按钮 - .el-icon-close
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable .el-icon-close {
  width: 14px !important;
  opacity: 0;
}
// 选中的显示关闭按钮
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
  width: 14px !important;
  opacity: 1 !important;
}
// 如果鼠标放在未选中的tab上，则：显示关闭按钮
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
  opacity: 1;
}
// 选中的padding 为0
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  padding: 0 !important;
}
// 鼠标在选项卡（选中和未选中）上，固定padding
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
  padding: 0 $tabs-width !important;
}
// 固定选项卡（选中的）padding
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  padding: 0 $tabs-width !important;
}

// .el-tabs--card > .el-tabs__header .el-tabs__item {
//   padding: 0 $tabs-width !important;
// }