ElAffix图钉组件使用跳坑

By | 2023年6月25日
0 Comment

简述

ElAffix是Elmenet-plus提供的一个固定用途的组件，主要有以下属性

  1. offset 固定时的偏移量
  2. position 固定位置，'top' | 'bottom' 默认top
  3. target 容器
  4. z-index

实现原理

通过useElementBounding方法计算出当前的位置和大小，以及target的位置和大小。

然后通过偏移量和位置比较是否需要进行固定，如果需要再计算出top等值

const affixStyle = computed<CSSProperties>(() => {
  if (!fixed.value) return {}

  const offset = props.offset ? addUnit(props.offset) : 0
  return {
    height: `${rootHeight.value}px`,
    width: `${rootWidth.value}px`,
    top: props.position === 'top' ? offset : '',
    bottom: props.position === 'bottom' ? offset : '',
    transform: transform.value ? `translateY(${transform.value}px)` : '',
    zIndex: props.zIndex,
  }
})

注意点

  1. offset： 设置的值要比top大，否则fixed为false，那么就不会触发固定
  2. 要注意尺寸设置，如果所在html元素width或者height为0，那么该组件也会随之变为0