以下是一个简单的示例,演示了如何使用 <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