boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed scroll component so it uses slot props instead of the depcrecated .

Browse Source
This commit is contained in:
DebaucheryLibrarian
2020-12-26 23:51:27 +01:00
parent ced8f447a7
commit c503e12adb
32 changed files with 1421 additions and 1538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
assets/components/scroll/scroll.vue
View File

@@ -22,7 +22,12 @@
@click="scroll('left')"
><Icon icon="arrow-left3" /></div>
<slot />
<div
ref="content"
class="content"
>
<slot :loaded="loaded" />
</div>
<div
v-show="enabled && !expanded"
@@ -52,34 +57,35 @@
import Expand from '../expand/expand.vue';
function updateScroll() {
this.scrollable = this.target.scrollWidth > this.target.clientWidth;
this.scrollAtStart = this.target.scrollLeft === 0;
this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
this.scrollable = this.$refs.content.scrollWidth > this.$refs.content.clientWidth;
this.scrollAtStart = this.$refs.content.scrollLeft === 0;
this.scrollAtEnd = this.$refs.content.scrollWidth - this.$refs.content.clientWidth === this.$refs.content.scrollLeft;
}
function scroll(direction) {
if (direction === 'right') {
this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
this.$refs.content.scrollLeft = this.$refs.content.scrollLeft + this.$refs.content.clientWidth - 100;
}
if (direction === 'left') {
this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
this.$refs.content.scrollLeft = this.$refs.content.scrollLeft - this.$refs.content.clientWidth + 100;
}
}
function mounted() {
this.target = this.$slots.default[0].elm;
function loaded(_event) {
// typically triggered by slotted component when an image loads, affecting scrollWidth
this.updateScroll();
}
this.target.addEventListener('scroll', () => this.updateScroll());
function mounted() {
this.$refs.content.addEventListener('scroll', () => this.updateScroll());
window.addEventListener('resize', this.updateScroll);
// typically triggered by slotted component when an image loads, affecting scrollWidth
this.$on('load', () => this.updateScroll());
this.updateScroll();
}
function beforeDestroy() {
this.target.removeEventListener('scroll', this.updateScroll);
this.$refs.content.removeEventListener('scroll', this.updateScroll);
window.removeEventListener('resize', this.updateScroll);
}
@@ -108,7 +114,6 @@ export default {
},
data() {
return {
target: null,
scrollable: true,
scrollAtStart: true,
scrollAtEnd: false,
@@ -119,6 +124,7 @@ export default {
beforeDestroy,
methods: {
scroll,
loaded,
updateScroll,
},
};
@@ -143,6 +149,16 @@ export default {
position: relative;
}
.content {
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.expand-light {
display: none;
}
@@ -233,6 +249,14 @@ export default {
display: none;
}
&.scroll-start {
left: 0;
}
&.scroll-end {
right: 0;
}
&:hover {
display: flex;
cursor: pointer;