当前位置:编程学习 > > 正文

element加固态(Element Plus实现Affix 固钉)

时间:2021-10-03 01:26:28类别:编程学习

element加固态

Element Plus实现Affix 固钉

一、组件介绍

Affix组件用于将页面元素固定在特定可视区域。

1.1 属性

1.2 事件

二、源码分析

2.1 template

  • <template>
      <li ref="root" class="el-affix" :style="rootStyle">
        <li :class="{'el-affix--fixed': state.fixed}" :style="affixStyle">
          <slot></slot>
        </li>
      </li>
    </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 实现总结:

    到此这篇关于Element Plus实现Affix 固钉的文章就介绍到这了,更多相关Element Affix 固钉内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐