Element-ui 的 el-scrollbar 滚动条
Element-ui 的 el-scrollbar 滚动条
Element-ui 的 el-scrollbar 滚动条
el-scrollbar 作用,只是美化了浏览器自己的滚动条,el-scrollbar使用前先把浏览器自己的滚动条调试号,最后在外层加上 el-scrollbar标签并设置为height: 100%; 即可
el-scrollbar 只是美化滚动条 el-scrollbar 只是美化滚动条 el-scrollbar 只是美化滚动条
滚动条实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <template>
<div style="height: 100%">
<el-aside class="fei-scrollbar" style="height: 100%; width: 200px">
<el-scrollbar style="height: 100%" data-title="使用框架的滚动条样式,但是要自己设置内容区域高度">
<el-menu default-active="2">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>大飞菜单一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">飞选项1</el-menu-item>
<el-menu-item index="1-2">飞选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">飞选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">飞选项4</template>
<el-menu-item index="1-4-1">飞选项1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
</div>
</template>
<script>
export default {
data() {
return {}
},
}
</script>
<style lang="less">
html, body, #app { // 设置高度
height: 100%;
}
// 隐藏 x 轴滚动条
.fei-scrollbar {
.el-scrollbar__wrap {
overflow-x: hidden;
}
}
</style>
|
底部
没有了