Element Plus Affix 고정 못 실현
Affix 구성 요 소 는 페이지 요 소 를 특정 시각 영역 에 고정 시 키 는 데 사 용 됩 니 다.
1.1 속성
2.1 template
<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 를 통 해 내용 을 받 습 니 다.2.2 script
// ,
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,
}
})
}
2.3 총 결 실현:이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ElementUI 기본 스타일을 수정하는 몇 가지 방법(소결)ElementUI는 ui 구성 요소 라이브러리로 현재 최신 버전react와 vue 등 주류 프레임워크를 지원합니다.이 라이브러리의 기본 테마색은 하늘색입니다. 프로젝트 개발에 사용할 경우 기본 스타일을 수정해야 하는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.