0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

去除element滚动条

Browse Source
master
刘元博 3 years ago
parent b4f2a4f7dd
commit 6a18e06339
2 changed files with 104 additions and 112 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 28
      ruoyi-ui/src/components/IconSelect/index.vue
  2. 188
      ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue

28
ruoyi-ui/src/components/IconSelect/index.vue
Unescape View File

@ -5,16 +5,14 @@
<i slot="suffix" class="el-icon-search el-input__icon" /> <i slot="suffix" class="el-icon-search el-input__icon" />
</el-input> </el-input>
<div class="icon-list"> <div class="icon-list">
<el-scrollbar> <div class="list-container">
<div class="list-container"> <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
<div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> <div :class="['icon-item', { active: activeIcon === item }]">
<div :class="['icon-item', { active: activeIcon === item }]"> <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
<svg-icon :icon-class="item" class-name="icon" style="height: 30px;width: 16px;" /> <span>{{ item }}</span>
<span :title="item">{{ item }}</span>
</div>
</div> </div>
</div> </div>
</el-scrollbar> </div>
</div> </div>
</div> </div>
</template> </template>
@ -63,27 +61,21 @@ export default {
} }
.icon-list { .icon-list {
height: 200px; height: 200px;
::v-deep .el-scrollbar { overflow: auto;
height: 100%;
.el-scrollbar__wrap {
overflow-x: hidden;
}
}
.list-container { .list-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.icon-item-wrapper { .icon-item-wrapper {
width: calc(100% / 3); width: calc(100% / 3);
height: 30px; height: 25px;
line-height: 30px; line-height: 25px;
margin-bottom: -5px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
.icon-item { .icon-item {
display: flex; display: flex;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
padding: 0 2px; padding: 0 5px;
&:hover { &:hover {
background: #ececec; background: #ececec;
border-radius: 5px; border-radius: 5px;

188
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
Unescape View File

@ -1,94 +1,94 @@
<template> <template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot /> <slot />
</el-scrollbar> </el-scrollbar>
</template> </template>
<script> <script>
const tagAndTagSpacing = 4 // tagAndTagSpacing const tagAndTagSpacing = 4 // tagAndTagSpacing
export default { export default {
name: 'ScrollPane', name: 'ScrollPane',
data() { data() {
return { return {
left: 0 left: 0
} }
}, },
computed: { computed: {
scrollWrapper() { scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap return this.$refs.scrollContainer.$refs.wrap
} }
}, },
mounted() { mounted() {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
}, },
beforeDestroy() { beforeDestroy() {
this.scrollWrapper.removeEventListener('scroll', this.emitScroll) this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
}, },
methods: { methods: {
handleScroll(e) { handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40 const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}, },
emitScroll() { emitScroll() {
this.$emit('scroll') this.$emit('scroll')
}, },
moveToTarget(currentTag) { moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.scrollWrapper const $scrollWrapper = this.scrollWrapper
const tagList = this.$parent.$refs.tag const tagList = this.$parent.$refs.tag
let firstTag = null let firstTag = null
let lastTag = null let lastTag = null
// find first tag and last tag // find first tag and last tag
if (tagList.length > 0) { if (tagList.length > 0) {
firstTag = tagList[0] firstTag = tagList[0]
lastTag = tagList[tagList.length - 1] lastTag = tagList[tagList.length - 1]
} }
if (firstTag === currentTag) { if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0 $scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) { } else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else { } else {
// find preTag and nextTag // find preTag and nextTag
const currentIndex = tagList.findIndex(item => item === currentTag) const currentIndex = tagList.findIndex(item => item === currentTag)
const prevTag = tagList[currentIndex - 1] const prevTag = tagList[currentIndex - 1]
const nextTag = tagList[currentIndex + 1] const nextTag = tagList[currentIndex + 1]
// the tag's offsetLeft after of nextTag // the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
// the tag's offsetLeft before of prevTag // the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
} }
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scroll-container { .scroll-container {
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
::v-deep { ::v-deep {
.el-scrollbar__bar { .el-scrollbar__bar {
bottom: 0px; bottom: 0px;
} }
.el-scrollbar__wrap { .el-scrollbar__wrap {
height: 49px; height: 39px;
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save