Fixed 固定
用于将内容固定在页面的特定位置，支持拖拽。
参数
Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| visible | boolean | true | 是否显示 |
| target | string | HTMLElement | 'body' | 挂载的目标元素 |
| position | { top?: number | string; right?: number | string; bottom?: number | string; left?: number | string } | { right: '40px', bottom: '40px' } | 初始位置 |
| draggable | boolean | false | 是否可拖拽 |
| zIndex | number | 6000 | z-index |
Slots
| 名称 | 描述 | 参数 |
|---|---|---|
| default | 默认插槽，用于显示固定内容 | - |
Events
| 名称 | 描述 | 参数 |
|---|---|---|
| dragging | 拖拽开始事件 | (val: boolean) => void |
| change | 位置改变事件 | (position: { top: number; left: number }) => void |
示例
基础用法
基本的固定元素，默认显示在右下角。
自定义位置
你可以通过 position 属性设置固定元素的位置。
使用拖拽
通过 draggable 属性可以使固定元素支持拖拽。
指定挂载目标
通过 target 属性可以将固定元素挂载到指定的 DOM 元素上，并限制在该元素内拖拽。
显示/隐藏
通过 visible 属性控制固定元素的显示和隐藏。
回到顶部示例
结合容器滚动实现回到顶部的示例。