✨(component): 新增affix 锚点组件

package/document-component/src/document/zh-CN/components/affix.md

@@ -0,0 +1,84 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 使用锚点，可以将内容固定在容器内，并且不随容器的滚动而滚动，常用于侧边菜单导航等。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-affix` 标签, 创建锚点，`target` 属性用于需要监听其滚动事件的元素，默认为 `document.body` ,`top`设置距离容器顶部偏移量
+<template>
+  <div style="width:100%;height:200px">
+    <lay-affix :target="target" :top="0" v-if="target">
+      <lay-button type="normal">固定在最顶部</lay-button>
+    </lay-affix>
+    <lay-affix :target="target" :top="38" v-if="target" style="margin-left:150px;">
+      <lay-button type="normal">固定在距离顶部38px</lay-button>
+    </lay-affix>
+    <lay-affix :target="target" :top="76" v-if="target" style="margin-left:350px">
+      <lay-button type="normal">固定在距离顶部76px</lay-button>
+    </lay-affix>
+    <lay-affix :target="target" :top="114" v-if="target" style="margin-left:550px">
+      <lay-button type="normal">固定在距离顶部114px</lay-button>
+    </lay-affix>
+    <lay-affix :target="target" :top="152" v-if="target" style="margin-left:750px">
+      <lay-button type="normal">固定在距离顶部152px</lay-button>
+    </lay-affix>
+  </div>
+</template>
+
+<script setup>
+  import { nextTick,ref } from 'vue'
+  const target=ref()
+  nextTick(()=>{
+    target.value=document.querySelector(".layui-body");
+  })
+</script>
+:::
+
+::: title 固定在最底部
+:::
+
+::: demo 使用 `bottom` 属性, 设置距离容器底部偏移量
+<template>
+  <div style="width:100%;height:100px">
+    <lay-affix :target="target" :bottom="0" v-if="target">
+      <lay-button type="normal">固定在最底部</lay-button>
+    </lay-affix>
+  </div>
+</template>
+
+<script setup>
+  import { nextTick,ref } from 'vue'
+  const target=ref()
+  nextTick(()=>{
+    target.value=document.querySelector(".layui-body");
+  })
+</script>
+:::
+
+
+
+
+::: title Aiffx 属性
+:::
+
+::: table
+
+| 属性   | 描述 | 可选值         |
+| ------ | ---- | -------------- |
+| top    | 顶部偏移量 : number | 0             |
+| bottom | 底部偏移量 : number，优先级大于`top` | - |
+| target | 指定参考容器 : HTMLElement | 默认`document.body`,请务必确保能够正确获取到dom|
+
+:::
+
+::: contributor affix
+:::
+
+::: previousNext affix
+:::

package/document-component/src/router/zh-CN.ts

@@ -404,6 +404,11 @@ const zhCN = [
             component: () => import("../document/zh-CN/components/cascader.md"),
             meta: { title: "级联选择器" },
           },
+          {
+            path: "/zh-CN/components/Affix",
+            component: () => import("../document/zh-CN/components/affix.md"),
+            meta: { title: "锚点" },
+          },
         ],
       },
     ],

package/document-component/src/view/utils/menus.ts

@@ -369,6 +369,12 @@ const menus = [
         subTitle: "noticeBar",
         path: "/zh-CN/components/noticeBar",
       },
+      {
+        id: 100,
+        title: "锚点",
+        subTitle: "Affix",
+        path: "/zh-CN/components/affix",
+      },
     ],
   },
   {