From 4610953b11aaab9719d195329932fbb195289b19 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: Mon, 10 Apr 2023 18:33:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=B2=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=9B=BE=E6=A0=87=E9=AB=98=E4=BA=AE=E5=9B=9E?= =?UTF-8?q?=E6=98=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IconSelect/index.vue | 93 +++++++++++++++++++++-------- src/views/system/menu/index.vue | 2 +- 2 files changed, 70 insertions(+), 25 deletions(-) diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue index 1199456..dbfd048 100644 --- a/src/components/IconSelect/index.vue +++ b/src/components/IconSelect/index.vue @@ -2,7 +2,7 @@ <div class="icon-body"> <el-input v-model="iconName" - style="position: relative;" + class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @@ -11,10 +11,16 @@ <template #suffix><i class="el-icon-search el-input__icon" /></template> </el-input> <div class="icon-list"> - <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> - <svg-icon :icon-class="item" style="height: 30px;width: 16px;" /> - <span>{{ item }}</span> - </div> + <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> + </div> + </el-scrollbar> </div> </div> </template> @@ -22,6 +28,12 @@ <script setup> import icons from './requireIcons' +const props = defineProps({ + activeIcon: { + type: String + } +}); + const iconName = ref(''); const iconList = ref(icons); const emit = defineEmits(['selected']); @@ -49,26 +61,59 @@ defineExpose({ </script> <style lang='scss' scoped> -.icon-body { - width: 100%; - padding: 10px; - .icon-list { - height: 200px; - overflow-y: scroll; - div { - height: 30px; - line-height: 30px; - margin-bottom: -5px; - cursor: pointer; - width: 33%; - float: left; + .icon-body { + width: 100%; + padding: 10px; + .icon-search { + position: relative; + margin-bottom: 5px; } - span { - display: inline-block; - vertical-align: -0.15em; - fill: currentColor; - overflow: hidden; + .icon-list { + height: 200px; + :deep(.el-scrollbar) { + height: 100%; + .el-scrollbar__wrap { + overflow-x: hidden; + } + } + .list-container { + display: flex; + flex-wrap: wrap; + .icon-item-wrapper { + width: calc(100% / 3); + height: 30px; + line-height: 30px; + margin-bottom: -5px; + cursor: pointer; + display: flex; + .icon-item { + display: flex; + max-width: 100%; + height: 100%; + padding: 0 2px; + &:hover { + background: #ececec; + border-radius: 5px; + } + .icon { + flex-shrink: 0; + } + span { + display: inline-block; + vertical-align: -0.15em; + fill: currentColor; + padding-left: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .icon-item.active { + background: #ececec; + border-radius: 5px; + } + } + } } } -} </style> \ No newline at end of file diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index c3f55a4..db4bd02 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -130,7 +130,7 @@ </template> </el-input> </template> - <icon-select ref="iconSelectRef" @selected="selected" /> + <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" /> </el-popover> </el-form-item> </el-col>