目录一、组件介绍二、源码分析2.1 template2.2 script2.3 实现总结:一、组件介绍 Affix组件用于将页面元素固定在特定可视区域。 1.1 属性
Affix组件用于将页面元素固定在特定可视区域。
1.1 属性
1.2 事件
<template>
<div ref="root" class="el-affix" :style="rootStyle">
<div :class="{'el-affix--fixed': state.fixed}" :style="affixStyle">
<slot></slot>
</div>
</div>
</template>
template部分很简单,通过slot接收内容
// 部分核心代码,代码顺序有所调整
setup(props, { emit }) {
// target容器 ref
const target = ref(null)
// 固钉ref,与template中的ref属性配合,得到html元素
const root = ref(null)
// 滚动容器ref
const scrollContainer = ref(null)
// 固钉状态
const state = Reactive({
fixed: false,
height: 0, // height of root
width: 0, // width of root
scrollTop: 0, // scrollTop of documentElement
clientHeight: 0, // clientHeight of documentElement
transfORM: 0,
})
onMounted(() => {
// 根据传入的target确定 target容器
if (props.target) {
target.value = document.querySelector(props.target)
if (!target.value) {
throw new Error(`target is not existed: ${props.target}`)
}
} else {
target.value = document.documentElement
}
// 根据固钉元素,向上寻找滚动容器
scrollContainer.value = getScrollContainer(root.value)
// 监听滚动容器的scroll事件
on(scrollContainer.value, 'scroll', onScroll)
// 监听固钉元素的resize事件
addResizeListener(root.value, updateState)
})
// 滚动容器的scroll事件的响应函数
const onScroll = () => {
// 更新固钉状态
updateState()
emit('scroll', {
scrollTop: state.scrollTop,
fixed: state.fixed,
})
}
// 更新固钉状态函数
const updateState = () => {
const rootRect = root.value.getBoundinGClientRect()
const targetRect = target.value.getBoundingClientRect()
state.height = rootRect.height
state.width = rootRect.width
state.scrollTop = scrollContainer.value === window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop
state.clientHeight = document.documentElement.clientHeight
if (props.position === 'top') {
if (props.target) {
const difference = targetRect.bottom - props.offset - state.height
// targetRect.bottom > 0 对应的是让固钉始终保持在容器内,超过范围则隐藏
state.fixed = props.offset > rootRect.top && targetRect.bottom > 0
// 用于处理场景:滚动过程中,target容器可视区域不足以显示整个固钉,则固钉应相应偏移,只展示部分
state.transform = difference < 0 ? difference : 0
} else {
state.fixed = props.offset > rootRect.top
}
} else {
if (props.target) {
const difference = state.clientHeight - targetRect.top - props.offset - state.height
state.fixed = state.clientHeight - props.offset < rootRect.bottom && state.clientHeight > targetRect.top
state.transform = difference < 0 ? -difference : 0
} else {
state.fixed = state.clientHeight - props.offset < rootRect.bottom
}
}
}
// 监测固钉fixed状态变化,并对外emit change事件
watch(() => state.fixed, () => {
emit('change', state.fixed)
})
// 计算属性,通过固钉的状态自动更新固钉的样式
const affixStyle = computed(() => {
if (!state.fixed) {
return
}
const offset = props.offset ? `${props.offset}px` : 0
const transform = state.transform ? `translateY(${state.transform}px)` : ''
return {
height: `${state.height}px`,
width: `${state.width}px`,
top: props.position === 'top' ? offset : '',
bottom: props.position === 'bottom' ? offset : '',
transform: transform,
zIndex: props.zIndex,
}
})
}
到此这篇关于Element Plus实现Affix 固钉的文章就介绍到这了,更多相关Element Affix 固钉内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Element Plus实现Affix 固钉
本文链接: https://www.lsjlt.com/news/130748.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0