可以使用
element-ui中的
Tabs组件，该组件支持
滚动和可关闭标签页，并且可以通过设置属性来实现箭头切换上一页下一页的功能。
具体实现步骤如下：
1. 安装
element-ui组件库
```
npm install
element-ui -S
```
2. 在Vue项目中引入
element-ui组件库
```
javascript
import Vue from 'vue';
import
ElementUI from '
element-ui';
import '
element-ui/lib/theme-chalk/index.css';
Vue.use(
ElementUI);
```
3. 在Vue组件中使用
Tabs组件
```html
<template>
<div class="
tab-container">
<
el-
tabs v-mod
el="active
Tab" :
tab-position="
tabPosition" type="border-card" closable @
tab-remove="handle
TabRemove">
<
el-
tab-
pane v-for="(
tab, index) in
tabs" :key="
tab.name" :lab
el="
tab.title" :name="
tab.name">
{{
tab.content }}
</
el-
tab-
pane>
</
el-
tabs>
</div>
</template>
<script>
export default {
data() {
return {
active
Tab: '',
tabPosition: 'top',
tabs: [
{ name: '
tab1', title: '标签页1', content: '标签页1的
内容' },
{ name: '
tab2', title: '标签页2', content: '标签页2的
内容' },
{ name: '
tab3', title: '标签页3', content: '标签页3的
内容' },
{ name: '
tab4', title: '标签页4', content: '标签页4的
内容' },
{ name: '
tab5', title: '标签页5', content: '标签页5的
内容' },
{ name: '
tab6', title: '标签页6', content: '标签页6的
内容' },
{ name: '
tab7', title: '标签页7', content: '标签页7的
内容' },
{ name: '
tab8', title: '标签页8', content: '标签页8的
内容' },
{ name: '
tab9', title: '标签页9', content: '标签页9的
内容' },
{ name: '
tab10', title: '标签页10', content: '标签页10的
内容' },
{ name: '
tab11', title: '标签页11', content: '标签页11的
内容' },
{ name: '
tab12', title: '标签页12', content: '标签页12的
内容' },
{ name: '
tab13', title: '标签页13', content: '标签页13的
内容' },
{ name: '
tab14', title: '标签页14', content: '标签页14的
内容' },
{ name: '
tab15', title: '标签页15', content: '标签页15的
内容' },
],
};
},
methods: {
handle
TabRemove(
tab) {
const index = this.
tabs.findIndex((t) => t.name ===
tab.name);
this.
tabs.splice(index, 1);
},
},
};
</script>
<style>
.
tab-container {
width: 400px;
overflow: hidden;
}
.
el-
tabs__nav-scroll {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.
el-
tabs__nav-wrap {
display: flex !important;
}
</style>
```
4. 自定义样式实现箭头切换上一页下一页的功能
```css
.
tab-container {
width: 400px;
overflow: hidden;
}
.
el-
tabs__nav-scroll {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.
el-
tabs__nav-wrap {
display: flex !important;
}
.
el-
tabs__nav-prev,
.
el-
tabs__nav-next {
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 12px;
text-align: center;
line-height: 20px;
cursor: pointer;
background-color: #eee;
}
.
el-
tabs__nav-prev:hover,
.
el-
tabs__nav-next:hover {
background-color: #ddd;
}
.
el-
tabs__nav-prev.disabled,
.
el-
tabs__nav-next.disabled {
cursor: not-allowed;
background-color: #ccc;
}
```
在上面的代码中，我们通过设置`.
el-
tabs__nav-scroll`和`.
el-
tabs__nav-wrap`的样式，将标签页的导航栏设置为横向布局，并且通过在左侧和右侧添加箭头来实现切换上一页下一页的功能。同时，通过监听`@
tab-remove`事件，我们可以在用户关闭标签页时动态更新`this.
tabs`数组中的数据。
这篇博客主要介绍了如何在ElementUI的el-tabs组件中实现固定高度，并确保内容超出时可以滚动。通过设置外部容器.el-tabs--card和每个tab内容容器.el-tab-pane的高度，可以达到屏幕高度适应并实现滚动效果。
扫一扫
7808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
