refactor(affix): tsx

This commit is contained in:
07akioni 2021-01-18 14:36:53 +08:00
parent 25b5f486c6
commit 4ee4582710
2 changed files with 24 additions and 27 deletions

View File

@ -1,2 +1,2 @@
/* istanbul ignore file */
export { default as NAffix } from './src/Affix.vue'
export { default as NAffix } from './src/Affix'

View File

@ -1,18 +1,3 @@
<template>
<div
ref="selfRef"
class="n-affix"
:class="{
[`n-affix--affixed`]: affixed,
[`n-affix--absolute-positioned`]: position === 'absolute'
}"
:style="mergedstyle"
>
<slot />
</div>
</template>
<script lang="ts">
import {
ref,
computed,
@ -20,10 +5,12 @@ import {
onBeforeUnmount,
defineComponent,
CSSProperties,
PropType
PropType,
h,
renderSlot
} from 'vue'
import { getScrollParent, unwrapElement } from 'seemly'
import { useConfig, useStyle } from '../../_mixins'
import { useStyle } from '../../_mixins'
import { warn } from '../../_utils'
import style from './styles/index.cssr'
@ -91,7 +78,7 @@ export default defineComponent({
return offsetBottom === undefined ? bottom : offsetBottom
})
const selfRef = ref<Element | null>(null)
const init = () => {
const init = (): void => {
const { target: getScrollTarget, listenTo } = props
let scrollElement
if (getScrollTarget) {
@ -112,7 +99,7 @@ export default defineComponent({
handleScroll()
}
}
const handleScroll = () => {
const handleScroll = (): void => {
const { value: containerEl } = scrollElementRef
const { value: selfEl } = selfRef
if (!containerEl || !selfEl) return
@ -169,13 +156,7 @@ export default defineComponent({
}
})
return {
...useConfig(props),
selfRef,
scrollElement: scrollElementRef,
stickToTop: stickToTopRef,
stickToBottom: stickToBottomRef,
bottomAffixedTriggerScrollTop: bottomAffixedTriggerScrollTopRef,
topAffixedTriggerScrollTop: topAffixedTriggerScrollTopRef,
affixed: affixedRef,
mergedstyle: computed<CSSProperties>(() => {
const style: CSSProperties = {}
@ -191,6 +172,22 @@ export default defineComponent({
return style
})
}
},
render () {
return (
<div
ref="selfRef"
class={[
'n-affix',
{
'n-affix--affixed': this.affixed,
'n-affix--absolute-positioned': this.position === 'absolute'
}
]}
style={this.mergedstyle}
>
{renderSlot(this.$slots, 'default')}
</div>
)
}
})
</script>