在 Element Plus 中,<el-affix> 组件用于实现固定定位,即在页面滚动时,将组件固定在指定位置。这个组件在 Element UI 中也存在,但在 Element Plus 中也得到了支持。

以下是一个简单的示例,演示了如何使用 <el-affix> 组件:
<template>
  <div style="height: 200px; overflow-y: scroll;">
    <!-- 一些滚动的内容 -->
    <p>Scroll down to see the effect</p>
    <p>More content...</p>

    <!-- 固定在顶部的元素 -->
    <el-affix :offset-top="10">
      <el-alert
        title="Affix Content"
        type="success"
        show-icon
        center
        style="margin-bottom: 16px;"
      />
    </el-affix>

    <!-- 更多滚动的内容 -->
    <p>More content...</p>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

在上述示例中,<el-affix> 包裹了一个 <el-alert> 组件,使其在页面滚动时固定在顶部。offset-top 属性用于设置固定的偏移量,即距离顶部多少距离时开始固定。在这个例子中,设置为 10 表示滚动到距离顶部 10 像素时开始固定。

你可以根据实际需求调整 <el-affix> 的属性和包裹的内容来实现不同的固定效果。详细的文档可以参考 Element Plus 的官方文档:[Affix 固钉](https://element-plus.org/#/zh-CN/component/affix)。


转载请注明出处:http://www.zyzy.cn/article/detail/5567/ElementPlus