85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
|
::: 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
|
|||
|
|
:::
|