mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scrollbar): use ResizeObserver to detect content size change

Browse Source
This commit is contained in:
07akioni 2019-09-20 18:19:24 +08:00
parent ac388884da
commit ec8b5ae386
4 changed files with 60 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/common/Modal/src/ModalContent.vue
View File

@ -47,20 +47,20 @@ export default {
data () {
return {
slotDOM: [],
styleActive: false,
updateScrollbarTimerId: null
styleActive: false
// updateScrollbarTimerId: null
}
},
watch: {
active (newActive) {
this.$nextTick().then(() => {
if (newActive) {
this.updateScrollbar()
} else {
window.clearTimeout(this.updateScrollbarTimerId)
}
})
}
// active (newActive) {
// this.$nextTick().then(() => {
// if (newActive) {
// this.updateScrollbar()
// } else {
// window.clearTimeout(this.updateScrollbarTimerId)
// }
// })
// }
},
created () {
if (this.active) {
@ -74,16 +74,16 @@ export default {
this.$nextTick().then(this.registerContent)
},
beforeDestroy () {
window.clearTimeout(this.updateScrollbarTimerId)
// window.clearTimeout(this.updateScrollbarTimerId)
},
methods: {
updateScrollbar () {
this.updateScrollbarTimerId = window.setTimeout(() => {
// console.log('update scrollbar')
this.$refs.scrollbar.updateParameters()
this.updateScrollbar()
}, 300)
},
// updateScrollbar () {
// this.updateScrollbarTimerId = window.setTimeout(() => {
// // console.log('update scrollbar')
// this.$refs.scrollbar.updateParameters()
// this.updateScrollbar()
// }, 300)
// },
registerContent () {
const slots = this.$slots.default
const els = slots.map(vNode => vNode.elm).filter(el => el)

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

@ -66,6 +66,7 @@
<script>
import withapp from '../../../mixins/withapp'
import themable from '../../../mixins/themeable'
import resizeObserverDelagate from '../../../utils/delegate/resizeObserverDelegate'
export default {
name: 'NScrollbar',
@ -152,6 +153,9 @@ export default {
}
},
watch: {
'$refs.scrollContent': function () {
throw Error('n-scrollbar\'s content ref changed, which is not expected')
},
containerScrollTop () {
this.handleVerticalScroll()
},
@ -162,6 +166,9 @@ export default {
updated () {
// console.log('[NScrollbar.updated]')
},
beforeDestroy () {
resizeObserverDelagate.unregisterHandler(this.$refs.scrollContent)
},
destroyed () {
window.clearTimeout(this.horizontalScrollbarVanishTimerId)
window.clearTimeout(this.verticalScrollbarVanishTimerId)
@ -170,6 +177,7 @@ export default {
},
mounted () {
this.updateParameters()
resizeObserverDelagate.registerHandler(this.$refs.scrollContent, this.updateParameters)
},
methods: {
disableScrollbar () {

12
packages/common/Select/src/BaseSelect.vue
View File

@ -203,9 +203,9 @@ export default {
filteredOptions () {
this.$nextTick().then(() => {
this.updatePosition()
if (this.$refs.scrollbar) {
this.$refs.scrollbar.updateParameters()
}
// if (this.$refs.scrollbar) {
// this.$refs.scrollbar.updateParameters()
// }
})
},
value () {
@ -214,9 +214,9 @@ export default {
}
this.$nextTick().then(() => {
this.updatePosition()
if (this.$refs.scrollbar) {
this.$refs.scrollbar.updateParameters()
}
// if (this.$refs.scrollbar) {
// this.$refs.scrollbar.updateParameters()
// }
})
}
},

27
packages/utils/delegate/resizeObserverDelegate.js Normal file
View File

@ -0,0 +1,27 @@
class ResizeObserverDelegate {
constructor () {
console.log('resize observer')
this.handleResize = this.handleResize.bind(this)
this.observer = new ResizeObserver(this.handleResize)
this.elHandlersMap = new Map()
}
handleResize (entries) {
for (const entry of entries) {
const handler = this.elHandlersMap.get(entry.target)
if (handler) {
// console.log(entry)
handler()
}
}
}
registerHandler (el, handler) {
this.elHandlersMap.set(el, handler)
this.observer.observe(el)
}
unregisterHandler (el) {
this.elHandlersMap.delete(el)
this.observer.unobserve(el)
}
}
export default new ResizeObserverDelegate()