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

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;


 src/layout/components/AppMain.vue

@@ -42,3 +42,27 @@
  }

}

</style>



<style lang="scss">

// fix css style bug in open el-dialog

.el-popup-parent--hidden {

  .fixed-header {

    padding-right: 6px;

  }

}



::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}



::-webkit-scrollbar-track {

  background-color: #f1f1f1;

}



::-webkit-scrollbar-thumb {

  background-color: #c0c0c0;

  border-radius: 3px;

}

</style>




 src/layout/components/TagsView/ScrollPane.vue

@@ -99,7 +99,7 @@
    bottom: 0px;

  }

  :deep(.el-scrollbar__wrap) {

    height: 49px;

    height: 39px;

  }

}

</style>

 src/layout/index.vue

@@ -3,14 +3,12 @@
    <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">

      <el-scrollbar>

        <div :class="{ 'fixed-header': fixedHeader }">

          <navbar @setLayout="setLayout" />

          <tags-view v-if="needTagsView" />

        </div>

        <app-main />

        <settings ref="settingRef" />

      </el-scrollbar>

      <div :class="{ 'fixed-header': fixedHeader }">

        <navbar @setLayout="setLayout" />

        <tags-view v-if="needTagsView" />

      </div>

      <app-main />

      <settings ref="settingRef" />

    </div> 

  </div>

</template>

@@ -73,18 +71,6 @@
  position: relative;

  height: 100%;

  width: 100%;



  .el-scrollbar {

    height: 100%;

  }



  :deep(.el-scrollbar__bar).is-vertical {

    z-index: 10;

  }



  :deep(.el-scrollbar__wrap) {

    overflow-x: hidden;

  }



  &.mobile.openSidebar {

    position: fixed;