作者 刘元博

去除element滚动条

@@ -5,16 +5,14 @@ @@ -5,16 +5,14 @@
5 <i slot="suffix" class="el-icon-search el-input__icon" /> 5 <i slot="suffix" class="el-icon-search el-input__icon" />
6 </el-input> 6 </el-input>
7 <div class="icon-list"> 7 <div class="icon-list">
8 - <el-scrollbar>  
9 <div class="list-container"> 8 <div class="list-container">
10 <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> 9 <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
11 <div :class="['icon-item', { active: activeIcon === item }]"> 10 <div :class="['icon-item', { active: activeIcon === item }]">
12 - <svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" />  
13 - <span :title="item">{{ item }}</span> 11 + <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
  12 + <span>{{ item }}</span>
14 </div> 13 </div>
15 </div> 14 </div>
16 </div> 15 </div>
17 - </el-scrollbar>  
18 </div> 16 </div>
19 </div> 17 </div>
20 </template> 18 </template>
@@ -63,27 +61,21 @@ export default { @@ -63,27 +61,21 @@ export default {
63 } 61 }
64 .icon-list { 62 .icon-list {
65 height: 200px; 63 height: 200px;
66 - ::v-deep .el-scrollbar {  
67 - height: 100%;  
68 - .el-scrollbar__wrap {  
69 - overflow-x: hidden;  
70 - }  
71 - } 64 + overflow: auto;
72 .list-container { 65 .list-container {
73 display: flex; 66 display: flex;
74 flex-wrap: wrap; 67 flex-wrap: wrap;
75 .icon-item-wrapper { 68 .icon-item-wrapper {
76 width: calc(100% / 3); 69 width: calc(100% / 3);
77 - height: 30px;  
78 - line-height: 30px;  
79 - margin-bottom: -5px; 70 + height: 25px;
  71 + line-height: 25px;
80 cursor: pointer; 72 cursor: pointer;
81 display: flex; 73 display: flex;
82 .icon-item { 74 .icon-item {
83 display: flex; 75 display: flex;
84 max-width: 100%; 76 max-width: 100%;
85 height: 100%; 77 height: 100%;
86 - padding: 0 2px; 78 + padding: 0 5px;
87 &:hover { 79 &:hover {
88 background: #ececec; 80 background: #ececec;
89 border-radius: 5px; 81 border-radius: 5px;
@@ -87,7 +87,7 @@ export default { @@ -87,7 +87,7 @@ export default {
87 bottom: 0px; 87 bottom: 0px;
88 } 88 }
89 .el-scrollbar__wrap { 89 .el-scrollbar__wrap {
90 - height: 49px; 90 + height: 39px;
91 } 91 }
92 } 92 }
93 } 93 }