ExUI

Appearance

Affix 固定位置 ​

将页面元素钉在可视范围。

基础用法 ​

最简单的用法。

滚动区域顶部
向下滚动查看固定效果
vue
<template>
  <ExAffix :offset-top="0" @change="handleChange">
    <ExButton type="primary">固定按钮</ExButton>
  </ExAffix>
</template>

<script setup>
const handleChange = (fixed) => {
  console.log('固定状态:', fixed)
}
</script>

固定在顶部 ​

距离顶部一定距离时固定。

vue
<template>
  <ExAffix :offset-top="80">
    <ExButton type="success">距离顶部 80px 固定</ExButton>
  </ExAffix>
</template>

固定在底部 ​

距离底部一定距离时固定。

vue
<template>
  <ExAffix :offset-bottom="20">
    <ExButton type="warning">距离底部 20px 固定</ExButton>
  </ExAffix>
</template>

固定状态改变回调 ​

可以获取固定状态改变的回调。

固定状态卡片

当前状态: 未固定

vue
<template>
  <ExAffix :offset-top="100" @change="handleChange">
    <ExCard>
      固定状态: {{ affixed ? '已固定' : '未固定' }}
    </ExCard>
  </ExAffix>
</template>

<script setup>
import { ref } from 'vue'

const affixed = ref(false)

const handleChange = (fixed) => {
  affixed.value = fixed
}
</script>

API ​

Props ​

属性说明类型默认值
offset-top距离窗口顶部达到指定偏移量后触发number-
offset-bottom距离窗口底部达到指定偏移量后触发number-
target设置 Affix 需要监听其滚动事件的元素() => HTMLElement | Window() => window
z-index固定时的 z-indexnumber100

Events ​

事件名说明类型
change固定状态改变时触发(fixed: boolean) => void

Methods ​

方法名说明类型
updatePosition更新固定状态() => void