!695 下拉图标选择组件优化：1.已选择图标高亮回显 2.滚动条采用el-scrollbar Merge pull request !695 fro...

若依

2023-04-10 2e99c68ed071171dba9f048363fd873ed268d22e

!695 下拉图标选择组件优化：1.已选择图标高亮回显 2.滚动条采用el-scrollbar
Merge pull request !695 from 绿色心情/icon-select

 ruoyi-ui/src/assets/styles/sidebar.scss

@@ -1,7 +1,7 @@
#app {



  .main-container {

    min-height: 100%;

    height: 100%;

    transition: margin-left .28s;

    margin-left: $base-sidebar-width;

    position: relative;


 ruoyi-ui/src/components/IconSelect/index.vue

@@ -1,14 +1,20 @@
<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
    <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </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>
@@ -17,6 +23,11 @@
import icons from './requireIcons'
export default {
  name: 'IconSelect',
  props: {
    activeIcon: {
      type: String
    }
  },
  data() {
    return {
      name: '',
@@ -46,22 +57,55 @@
  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-search {
      position: relative;
      margin-bottom: 5px;
    }
    .icon-list {
      height: 200px;
      overflow-y: scroll;
      div {
        height: 30px;
        line-height: 30px;
        margin-bottom: -5px;
        cursor: pointer;
        width: 33%;
        float: left;
      ::v-deep .el-scrollbar {
        height: 100%;
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: 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;
          }
        }
      }
    }
  }

 ruoyi-ui/src/layout/index.vue

@@ -1,19 +1,19 @@
<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <el-scrollbar>
      <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
      <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
      <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
        <div :class="{'fixed-header':fixedHeader}">
          <navbar/>
          <tags-view v-if="needTagsView"/>
        </div>
        <app-main/>
        <right-panel>
          <settings/>
        </right-panel>
        <el-scrollbar>
          <div :class="{'fixed-header':fixedHeader}">
            <navbar/>
            <tags-view v-if="needTagsView"/>
          </div>
          <app-main/>
          <right-panel>
            <settings/>
          </right-panel>
        </el-scrollbar>
      </div>
    </el-scrollbar>
  </div>
</template>


 ruoyi-ui/src/views/system/menu/index.vue

@@ -134,7 +134,7 @@
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                  <svg-icon
                    v-if="form.icon"