zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add scrollpane left and right move arrow

This commit is contained in:
zileyuan 2020-02-20 17:09:05 +08:00
parent a45e64fcb2
commit 70254758e1
1 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/layout/components/TagsView/ScrollPane.vue
View File

@ -1,7 +1,19 @@
<template> <template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> <div class="scroll-box">
<slot /> <el-button
</el-scrollbar> class="scroll-arrow"
icon="el-icon-arrow-left"
@click="handleArrow(-80)"
/>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
<el-button
class="scroll-arrow"
icon="el-icon-arrow-right"
@click="handleArrow(80)"
/>
</div>
</template> </template>
<script> <script>
@ -25,6 +37,10 @@ export default {
const $scrollWrapper = this.scrollWrapper const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}, },
handleArrow(v) {
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + v
},
moveToTarget(currentTag) { moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth const $containerWidth = $container.offsetWidth
@ -82,4 +98,14 @@ export default {
} }
} }
} }
.scroll-box {
display: flex;
}
.scroll-arrow {
width: 28px;
height: 28px;
margin: 3px 3px;
padding: 1px 1px;
border-radius: 0;
}
</style> </style>