欧阳子桐 / RuoYi · 提交

转到一个项目

作者 若依
提交者 Gitee
提交 a4fe88ca611435ee33a6c872734c6f9da7489928 2 个父辈 af15a3b2 6a18e063

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

Merge pull request !707 from 也曾为你像超人/master
内嵌 并排对比
正在显示 4 个修改的文件 包含 138 行增加 和 137 行删除
@@ -5,16 +5,14 @@ @@ -5,16 +5,14 @@
5 <i slot="suffix" class="el-icon-search el-input__icon" /> 5 <i slot="suffix" class="el-icon-search el-input__icon" />
6 </el-input> 6 </el-input>
7 <div class="icon-list"> 7 <div class="icon-list">
8 - <el-scrollbar>  
9 - <div class="list-container">  
10 - <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">  
11 - <div :class="['icon-item', { active: activeIcon === item }]">  
12 - <svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" />  
13 - <span :title="item">{{ item }}</span>  
14 - </div> 8 + <div class="list-container">
  9 + <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
  10 + <div :class="['icon-item', { active: activeIcon === item }]">
  11 + <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
  12 + <span>{{ item }}</span>
15 </div> 13 </div>
16 </div> 14 </div>
17 - </el-scrollbar> 15 + </div>
18 </div> 16 </div>
19 </div> 17 </div>
20 </template> 18 </template>
@@ -63,27 +61,21 @@ export default { @@ -63,27 +61,21 @@ export default {
63 } 61 }
64 .icon-list { 62 .icon-list {
65 height: 200px; 63 height: 200px;
66 - ::v-deep .el-scrollbar {  
67 - height: 100%;  
68 - .el-scrollbar__wrap {  
69 - overflow-x: hidden;  
70 - }  
71 - } 64 + overflow: auto;
72 .list-container { 65 .list-container {
73 display: flex; 66 display: flex;
74 flex-wrap: wrap; 67 flex-wrap: wrap;
75 .icon-item-wrapper { 68 .icon-item-wrapper {
76 width: calc(100% / 3); 69 width: calc(100% / 3);
77 - height: 30px;  
78 - line-height: 30px;  
79 - margin-bottom: -5px; 70 + height: 25px;
  71 + line-height: 25px;
80 cursor: pointer; 72 cursor: pointer;
81 display: flex; 73 display: flex;
82 .icon-item { 74 .icon-item {
83 display: flex; 75 display: flex;
84 max-width: 100%; 76 max-width: 100%;
85 height: 100%; 77 height: 100%;
86 - padding: 0 2px; 78 + padding: 0 5px;
87 &:hover { 79 &:hover {
88 background: #ececec; 80 background: #ececec;
89 border-radius: 5px; 81 border-radius: 5px;
@@ -50,3 +50,26 @@ export default { @@ -50,3 +50,26 @@ export default {
50 } 50 }
51 } 51 }
52 </style> 52 </style>
  53 +
  54 +<style lang="scss">
  55 +// fix css style bug in open el-dialog
  56 +.el-popup-parent--hidden {
  57 + .fixed-header {
  58 + padding-right: 6px;
  59 + }
  60 +}
  61 +
  62 +::-webkit-scrollbar {
  63 + width: 6px;
  64 + height: 6px;
  65 +}
  66 +
  67 +::-webkit-scrollbar-track {
  68 + background-color: #f1f1f1;
  69 +}
  70 +
  71 +::-webkit-scrollbar-thumb {
  72 + background-color: #c0c0c0;
  73 + border-radius: 3px;
  74 +}
  75 +</style>
1 -<template>  
2 - <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">  
3 - <slot />  
4 - </el-scrollbar>  
5 -</template>  
6 -  
7 -<script>  
8 -const tagAndTagSpacing = 4 // tagAndTagSpacing  
9 -  
10 -export default {  
11 - name: 'ScrollPane',  
12 - data() {  
13 - return {  
14 - left: 0  
15 - }  
16 - },  
17 - computed: {  
18 - scrollWrapper() {  
19 - return this.$refs.scrollContainer.$refs.wrap  
20 - }  
21 - },  
22 - mounted() {  
23 - this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)  
24 - },  
25 - beforeDestroy() {  
26 - this.scrollWrapper.removeEventListener('scroll', this.emitScroll)  
27 - },  
28 - methods: {  
29 - handleScroll(e) {  
30 - const eventDelta = e.wheelDelta || -e.deltaY * 40  
31 - const $scrollWrapper = this.scrollWrapper  
32 - $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4  
33 - },  
34 - emitScroll() {  
35 - this.$emit('scroll')  
36 - },  
37 - moveToTarget(currentTag) {  
38 - const $container = this.$refs.scrollContainer.$el  
39 - const $containerWidth = $container.offsetWidth  
40 - const $scrollWrapper = this.scrollWrapper  
41 - const tagList = this.$parent.$refs.tag  
42 -  
43 - let firstTag = null  
44 - let lastTag = null  
45 -  
46 - // find first tag and last tag  
47 - if (tagList.length > 0) {  
48 - firstTag = tagList[0]  
49 - lastTag = tagList[tagList.length - 1]  
50 - }  
51 -  
52 - if (firstTag === currentTag) {  
53 - $scrollWrapper.scrollLeft = 0  
54 - } else if (lastTag === currentTag) {  
55 - $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth  
56 - } else {  
57 - // find preTag and nextTag  
58 - const currentIndex = tagList.findIndex(item => item === currentTag)  
59 - const prevTag = tagList[currentIndex - 1]  
60 - const nextTag = tagList[currentIndex + 1]  
61 -  
62 - // the tag's offsetLeft after of nextTag  
63 - const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing  
64 -  
65 - // the tag's offsetLeft before of prevTag  
66 - const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing  
67 -  
68 - if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {  
69 - $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth  
70 - } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {  
71 - $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft  
72 - }  
73 - }  
74 - }  
75 - }  
76 -}  
77 -</script>  
78 -  
79 -<style lang="scss" scoped>  
80 -.scroll-container {  
81 - white-space: nowrap;  
82 - position: relative;  
83 - overflow: hidden;  
84 - width: 100%;  
85 - ::v-deep {  
86 - .el-scrollbar__bar {  
87 - bottom: 0px;  
88 - }  
89 - .el-scrollbar__wrap {  
90 - height: 49px;  
91 - }  
92 - }  
93 -}  
94 -</style> 1 +<template>
  2 + <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
  3 + <slot />
  4 + </el-scrollbar>
  5 +</template>
  6 +
  7 +<script>
  8 +const tagAndTagSpacing = 4 // tagAndTagSpacing
  9 +
  10 +export default {
  11 + name: 'ScrollPane',
  12 + data() {
  13 + return {
  14 + left: 0
  15 + }
  16 + },
  17 + computed: {
  18 + scrollWrapper() {
  19 + return this.$refs.scrollContainer.$refs.wrap
  20 + }
  21 + },
  22 + mounted() {
  23 + this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
  24 + },
  25 + beforeDestroy() {
  26 + this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
  27 + },
  28 + methods: {
  29 + handleScroll(e) {
  30 + const eventDelta = e.wheelDelta || -e.deltaY * 40
  31 + const $scrollWrapper = this.scrollWrapper
  32 + $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
  33 + },
  34 + emitScroll() {
  35 + this.$emit('scroll')
  36 + },
  37 + moveToTarget(currentTag) {
  38 + const $container = this.$refs.scrollContainer.$el
  39 + const $containerWidth = $container.offsetWidth
  40 + const $scrollWrapper = this.scrollWrapper
  41 + const tagList = this.$parent.$refs.tag
  42 +
  43 + let firstTag = null
  44 + let lastTag = null
  45 +
  46 + // find first tag and last tag
  47 + if (tagList.length > 0) {
  48 + firstTag = tagList[0]
  49 + lastTag = tagList[tagList.length - 1]
  50 + }
  51 +
  52 + if (firstTag === currentTag) {
  53 + $scrollWrapper.scrollLeft = 0
  54 + } else if (lastTag === currentTag) {
  55 + $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
  56 + } else {
  57 + // find preTag and nextTag
  58 + const currentIndex = tagList.findIndex(item => item === currentTag)
  59 + const prevTag = tagList[currentIndex - 1]
  60 + const nextTag = tagList[currentIndex + 1]
  61 +
  62 + // the tag's offsetLeft after of nextTag
  63 + const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
  64 +
  65 + // the tag's offsetLeft before of prevTag
  66 + const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
  67 +
  68 + if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
  69 + $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
  70 + } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
  71 + $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
  72 + }
  73 + }
  74 + }
  75 + }
  76 +}
  77 +</script>
  78 +
  79 +<style lang="scss" scoped>
  80 +.scroll-container {
  81 + white-space: nowrap;
  82 + position: relative;
  83 + overflow: hidden;
  84 + width: 100%;
  85 + ::v-deep {
  86 + .el-scrollbar__bar {
  87 + bottom: 0px;
  88 + }
  89 + .el-scrollbar__wrap {
  90 + height: 39px;
  91 + }
  92 + }
  93 +}
  94 +</style>
1 <template> 1 <template>
2 <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> 2 <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
3 - <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>  
4 - <sidebar v-if="!sidebar.hide" class="sidebar-container"/>  
5 - <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">  
6 - <el-scrollbar>  
7 - <div :class="{'fixed-header':fixedHeader}">  
8 - <navbar/>  
9 - <tags-view v-if="needTagsView"/>  
10 - </div>  
11 - <app-main/>  
12 - <right-panel>  
13 - <settings/>  
14 - </right-panel>  
15 - </el-scrollbar> 3 + <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
  4 + <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
  5 + <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
  6 + <div :class="{'fixed-header':fixedHeader}">
  7 + <navbar/>
  8 + <tags-view v-if="needTagsView"/>
16 </div> 9 </div>
  10 + <app-main/>
  11 + <right-panel>
  12 + <settings/>
  13 + </right-panel>
  14 + </div>
17 </div> 15 </div>
18 </template> 16 </template>
19 17
@@ -74,18 +72,6 @@ export default { @@ -74,18 +72,6 @@ export default {
74 height: 100%; 72 height: 100%;
75 width: 100%; 73 width: 100%;
76 74
77 - .el-scrollbar{  
78 - height: 100%;  
79 - }  
80 -  
81 - ::v-deep .el-scrollbar__bar.is-vertical {  
82 - z-index: 10;  
83 - }  
84 -  
85 - ::v-deep .el-scrollbar__wrap {  
86 - overflow-x: hidden;  
87 - }  
88 -  
89 &.mobile.openSidebar { 75 &.mobile.openSidebar {
90 position: fixed; 76 position: fixed;
91 top: 0; 77 top: 0;