test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 09:50:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
efc12c341d
element-plus/website/docs/zh-CN/affix.md
kooriookami 8bda98b075
feat(affix): new component affix (#1260) 
* feat(affix): new component affix

re #1247

* feat: add test

* perf: update state

n

* docs: update docs

* perf: pref the component
2021-01-14 17:02:47 +08:00

1.6 KiB
Raw Blame History

Affix 固钉

将页面元素固定在特定可视区域。

基本用法

固钉默认固定在页面顶部。

:::demo 通过设置 offset 属性来改变吸顶距离，默认值为 0。

<el-affix :offset="120">
  <el-button type="primary">距离顶部 120px</el-button>
</el-affix>

:::

指定容器

通过设置 target 属性，让固钉始终保持在容器内，超过范围则隐藏。

:::demo 请注意容器避免出现滚动条。

<div class="affix-container">
  <el-affix target=".affix-container" :offset="80">
    <el-button type="primary">指定容器</el-button>
  </el-affix>
</div>

:::

固定位置

Affix 组件提供了两个固定位置：top 和 bottom。

:::demo 通过设置 position 属性来改变固定位置，默认值为 top 。

<el-affix position="bottom" :offset="20">
  <el-button type="primary">距离底部 20px</el-button>
</el-affix>

:::

Attributes

参数 说明 类型 可选值 默认值
offset 偏移距离 number — 0
position 固钉位置 string top / bottom top
target 指定容器（CSS 选择器） string — —
z-index 固钉层级 number — 100

Events

事件名称 说明 回调参数
change 固钉状态改变时触发的事件 (value: boolean)
scroll 滚动时触发的事件 滚动距离和固钉状态