mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scrollbar): support rail offset

Browse Source
This commit is contained in:
07akioni 2019-12-17 22:17:26 +08:00
parent 98a2a07e59
commit ec6f6b7125
5 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
demo/documentation/components/log/enUS/basic.md
View File

@ -9,8 +9,7 @@
:log="log"
@reach-top="handleReachTop"
@reach-bottom="handleReachBottom"
:bottom-loading="bottomLoading"
:top-loading="topLoading"
:loading="loading"
trim
/>
<template v-slot:action>
@ -31,34 +30,28 @@ function log () {
export default {
data () {
return {
topLoading: false,
bottomLoading: false,
loading: false,
log: log()
}
},
computed: {
loading () {
return this.topLoading || this.bottomLoading
}
},
methods: {
clear () {
this.log = ''
},
handleReachTop () {
if (this.topLoading) return
this.topLoading = true
if (this.loading) return
this.loading = true
setTimeout(() => {
this.log = log() + this.log
this.topLoading = false
this.loading = false
}, 1000)
},
handleReachBottom () {
if (this.bottomLoading) return
this.bottomLoading = true
if (this.loading) return
this.loading = true
setTimeout(() => {
this.log = this.log + log()
this.bottomLoading = false
this.loading = false
}, 1000)
}
}

2
packages/common/Log/index.js
View File

@ -1,5 +1,5 @@
/* istanbul ignore file */
import NLog from './src/main.vue'
import NLog from './src/Log.vue'
NLog.install = function (Vue) {
Vue.component(NLog.name, NLog)

4
packages/common/Log/src/main.vue → packages/common/Log/src/Log.vue
View File

@ -11,9 +11,7 @@
@wheel="handleWheel"
>
<n-scrollbar ref="scrollbar" @scroll="handleScroll">
<!-- <pre class="n-log__lines">{{ processedLog }}</pre> -->
<n-log-line v-for="(line, index) in synthesizedLines" :key="index" :line="line" />
<!-- <pre v-for="(line, index) in synthesizedLines" :key="index" class="n-log__line">{{ line }}</pre> -->
</n-scrollbar>
<n-fade-in-height-expand-transition width>
<n-log-loader v-if="loading" />
@ -26,8 +24,8 @@ import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
import NScrollbar from '../../Scrollbar'
import NLogLoader from './LogLoader'
import NFadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
import NLogLine from './LogLine'
import NFadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
export default {
name: 'NLog',

24
packages/common/Scrollbar/src/main.vue
View File

@ -25,6 +25,7 @@
</div>
</div>
<div
ref="verticalRail"
class="n-scrollbar-rail n-scrollbar-rail--vertical"
:style="{width: scrollbarSize}"
>
@ -45,6 +46,7 @@
</transition>
</div>
<div
ref="horizontalRail"
class="n-scrollbar-rail n-scrollbar-rail--horizontal"
:style="{height: scrollbarSize}"
>
@ -95,6 +97,8 @@ export default {
contentWidth: null,
containerHeight: null,
containerWidth: null,
verticalRailHeight: null,
horizontalRailWidth: null,
containerScrollTop: null,
containerScrollLeft: null,
horizontalScrollbarVanishTimerId: null,
@ -112,27 +116,27 @@ export default {
},
computed: {
verticalScrollbarHeight () {
if (this.containerHeight === null || this.contentHeight === null) return 0
if (this.containerHeight === null || this.contentHeight === null || this.verticalRailHeight === null) return 0
else {
return (this.containerHeight * this.containerHeight / this.contentHeight + this.width * 1.5)
return (this.verticalRailHeight * this.containerHeight / this.contentHeight + this.width * 1.5)
}
},
verticalScrollbarHeightPx () {
return this.verticalScrollbarHeight + 'px'
},
horizontalScrollbarWidth () {
if (this.containerWidth === null || this.contentWidth === null) return 0
if (this.containerWidth === null || this.contentWidth === null || this.horizontalRailWidth === null) return 0
else {
return (this.containerWidth * this.containerWidth / this.contentWidth + this.width * 1.5)
return (this.horizontalRailWidth * this.containerWidth / this.contentWidth + this.width * 1.5)
}
},
horizontalScrollbarWidthPx () {
return this.horizontalScrollbarWidth + 'px'
},
verticalScrollbarTop () {
if (this.containerHeight === null || this.containerScrollTop === null || this.contentHeight === null) return 0
if (this.containerHeight === null || this.containerScrollTop === null || this.contentHeight === null || this.verticalRailHeight === null) return 0
else {
return this.containerScrollTop / (this.contentHeight - this.containerHeight) * (this.containerHeight - this.verticalScrollbarHeight)
return this.containerScrollTop / (this.contentHeight - this.containerHeight) * (this.verticalRailHeight - this.verticalScrollbarHeight)
}
},
verticalScrollbarTopPx () {
@ -141,7 +145,7 @@ export default {
horizontalScrollbarLeft () {
if (this.containerWidth === null || this.containerScrollLeft === null || this.contentWidth === null) return 0
else {
return this.containerScrollLeft / (this.contentWidth - this.containerWidth) * (this.containerWidth - this.horizontalScrollbarWidth)
return this.containerScrollLeft / (this.contentWidth - this.containerWidth) * (this.horizontalRailWidth - this.horizontalScrollbarWidth)
}
},
horizontalScrollbarLeftPx () {
@ -287,6 +291,12 @@ export default {
this.containerHeight = this.$refs.scrollContainer.offsetHeight
this.containerWidth = this.$refs.scrollContainer.offsetWidth
}
if (this.$refs.horizontalRail) {
this.horizontalRailWidth = this.$refs.horizontalRail.offsetWidth
}
if (this.$refs.verticalRail) {
this.verticalRailHeight = this.$refs.verticalRail.offsetHeight
}
},
updateParameters () {
this.updatePositionParameters()

17
styles/Log.scss
View File

@ -14,11 +14,20 @@
@include m(bottom-bordered) {
border-bottom: 1px solid $--n-border-color;
}
@include b(scrollbar-content) {
padding-top: 8px;
padding-bottom: 8px;
overflow: hidden;
@include b(scrollbar) {
@include b(scrollbar-content) {
padding-top: 8px;
padding-bottom: 8px;
overflow: hidden;
}
@include b(scrollbar-rail) {
@include m(vertical) {
top: 8px;
bottom: 8px
}
}
}
@include e(lines) {
margin: 0;
white-space: pre-wrap;