恢复翻页/切换路由滚动功能

RuoYi

2023-04-23 78526a4bab6d71127d9a50bc5c4bb0088d8aec06

 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;