如何让页面中的anchor始终显示?
这行代码的作用是将内部的元素水平排列。它使用flex布局,并设置flex-direction为row,这使得内部元素在同一行上水平排列。
要让anchor一直显示在页面中,可以修改代码中的affixProps属性。将offsetTop的值设置为一个较大的正数,例如100,这样anchor会距离页面顶部一定的距离,并在滚动时保持固定位置,始终显示在页面中。修改后的代码如下所示:
<div style='display: flex; flex-direction: row'>
<t-anchor :affixProps='{ offsetTop: 100 }' style='margin-left: -20px;margin-right: 0px;' size='medium'>
<t-anchor-item :href=''#探索配置'' title='探索配置' style='margin-bottom: 10px;'>
<t-anchor-item :href=''#探索范围配置'' title='探索范围配置' style='margin-bottom: 10px;margin-top: 10px;'></t-anchor-item>
<t-anchor-item :href=''#定向操作配置'' title='定向操作配置' style='margin-bottom: 10px;'></t-anchor-item>
<t-anchor-item :href=''#定时操作配置'' title='定时操作配置' style='margin-bottom: 10px;'></t-anchor-item>
</t-anchor-item>
</t-anchor>
</div>
通过设置offsetTop的值,可以调整anchor相对于页面顶部的位置,以满足显示需求。
原文地址: https://www.cveoy.top/t/topic/qzzY 著作权归作者所有。请勿转载和采集!