ElementUI修改el-tabs标签页组件样式

文章介绍了ElementUI库中的el-tabs组件的用法,包括HTML结构和CSS样式调整,展示了如何创建一个带有边框卡片样式的标签切换功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官网

https://element.eleme.cn/2.13/#/zh-CN/component/tabs

效果

代码片段

html

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="基本信息" name="jbxx">基本信息</el-tab-pane>
        <el-tab-pane label="标签要素" name="bqys">标签要素</el-tab-pane>
        <el-tab-pane label="理化特征" name="lhtz">理化特征</el-tab-pane>
        <el-tab-pane label="危害信息" name="whxx">危害信息</el-tab-pane>
        <el-tab-pane label="应急处理措施" name="yjclcs">应急处理措施</el-tab-pane>
</el-tabs>

css

// el-tabs样式美化
::v-deep .el-tabs--border-card{
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-box-shadow:none;
}
::v-deep .el-tabs--border-card > .el-tabs__header{
  background-color: transparent;
  border-bottom: none;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  margin-left: 8px;
  border: none;
  border-radius: 8px 8px 0 0;
  background-color: #F3F7FE;
  padding: 4px 20px;
  color:#0065D5;
  line-height: 22px;
  height: 30px;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  background-color: #0065D5;
  color: #ffffff;
}

Element UI中,`el-tag`组件用于创建标签页或卡片标题。如果你想实现在菜单Tab标签超出宽度时自动滚动到可视区域并显示当前选中的标签,你可以通过CSS和JavaScript配合来实现。以下是一个简单的步骤: 1. 首先,在HTML结构上,保持`el-tabs`标签的默认布局,并确保每个`el-tag`都有唯一标识,以便判断哪个是当前选中的。 ```html <template> <el-tabs v-model="activeName"> <el-tab-pane label="Tab 1" name="pane1"> <!-- 标签内容 --> </el-tab-pane> <el-tab-pane label="Tab 2" name="pane2"> <!-- 标签内容 --> </el-tab-pane> <!-- 更多的tab pane... --> </el-tabs> </template> ``` 2. 然后,在Vue组件样式中,设置`el-tag`的溢出部分滚动条以及滚动到当前标签的CSS规则。你可以尝试使用`:hover`伪类来切换时滚动到对应标签。 ```css .el-tabs__item { position: relative; } .el-tabs__item:hover .el-tag { overflow-x: auto; white-space: nowrap; } .el-tabs__item.is-active .el-tag { left: 0; /* 当前激活的标签左移至可视区域 */ } ``` 3. 最后,在JavaScript中,当`activeName`发生变化时,手动滚动到对应的`el-tag`。这可以通过获取元素的offsetLeft值然后设置其scrollLeft来实现。 ```javascript export default { data() { return { activeName: 'pane1', }; }, methods: { handleTabChange(tab) { this.activeName = tab.name; const elTag = document.querySelector(`.el-tabs__item.is-active .el-tag`); if (elTag) { elTag.scrollIntoView({ behavior: 'smooth' }); } }, }, watch: { activeName(newVal, oldVal) { this.handleTabChange({ name: newVal }); }, }, }; ``` 注意:这个示例假设你已经在Vue实例中绑定了`handleTabChange`方法,当你切换tab时,它会被调用。同时,`scrollIntoView`方法可能会因为浏览器兼容性的问题需要处理,如果在某些旧版本的浏览器下有问题,可以考虑使用其他库如`vue-scrollto`.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值