From 78526a4bab6d71127d9a50bc5c4bb0088d8aec06 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期日, 23 四月 2023 16:43:38 +0800 Subject: [PATCH] 恢复翻页/切换路由滚动功能 --- src/components/IconSelect/index.vue | 30 +++++++++++------------------- 1 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue index dbfd048..26172fc 100644 --- a/src/components/IconSelect/index.vue +++ b/src/components/IconSelect/index.vue @@ -11,16 +11,14 @@ <template #suffix><i class="el-icon-search el-input__icon" /></template> </el-input> <div class="icon-list"> - <el-scrollbar> - <div class="list-container"> - <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> - <div :class="['icon-item', { active: activeIcon === item }]"> - <svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" /> - <span :title="item">{{ item }}</span> - </div> + <div class="list-container"> + <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> + <div :class="['icon-item', { active: activeIcon === item }]"> + <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/> + <span>{{ item }}</span> </div> </div> - </el-scrollbar> + </div> </div> </div> </template> @@ -61,7 +59,7 @@ </script> <style lang='scss' scoped> - .icon-body { + .icon-body { width: 100%; padding: 10px; .icon-search { @@ -70,27 +68,21 @@ } .icon-list { height: 200px; - :deep(.el-scrollbar) { - height: 100%; - .el-scrollbar__wrap { - overflow-x: hidden; - } - } + overflow: auto; .list-container { display: flex; flex-wrap: wrap; .icon-item-wrapper { width: calc(100% / 3); - height: 30px; - line-height: 30px; - margin-bottom: -5px; + height: 25px; + line-height: 25px; cursor: pointer; display: flex; .icon-item { display: flex; max-width: 100%; height: 100%; - padding: 0 2px; + padding: 0 5px; &:hover { background: #ececec; border-radius: 5px; -- Gitblit v1.9.3