附加 ​

将元素固定到特定的可见区域。

基本用法 ​

默认情况下，Affix 固定在页面顶部。

<template>
  <el-affix :offset="120">
    <el-button type="primary">Offset top 120px</el-button>
  </el-affix>
</template>

目标容器 ​

您可以设置 target 属性以始终将词缀保留在容器中。如果超出范围，它将被隐藏。

<template>
  <div class="affix-container">
    <el-affix target=".affix-container" :offset="80">
      <el-button type="primary">Target container</el-button>
    </el-affix>
  </div>
</template>

<style scoped>
.affix-container {
  text-align: center;
  height: 400px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
}
</style>

固定位置 ​

词缀组件提供两个固定位置：top 和 bottom。

<template>
  <el-affix position="bottom" :offset="20">
    <el-button type="primary">Offset bottom 20px</el-button>
  </el-affix>
</template>

API ​

属性 ​

| 名称 | 描述 | 类型 | 默认 | | ---------------- | ------------------------------------------------------------------- | ----------------------------- | ---- | --- | | 偏移 | 偏移距离 | 数字 | 0 | | 位置 | 词缀位置 | 枚举 | 顶部 | | 目标 | 目标容器（CSS 选择器） | 字符串 | — | | z 索引 | 后缀z-index | 数字 | 100 | 100 | | 传送 2.13.0 | 词缀元素是否被传送，如果是true，则会被传送到append-to设置的位置 | 布尔值 | 假 | | 追加到 2.13.0 | 词缀元素附加到哪个元素 | CSS选择器 / HTMLElement | 身体 |

活动 ​

老虎机 ​

暴露 ​

|名称 |描述 |类型 | | ---------- | ------------------------ | | ----------------------- | |更新 |手动更新附加状态 | 功能 | |更新根目录 |更新 rootRect 信息 | 功能 |