StickyLayout 侧边吸顶布局

说明

一个侧边吸顶布局组件，适用于具有固定侧边栏且自动吸顶的页面。当页面滚动时，侧边栏会相对于父容器（默认为页面）自动吸顶显示，同时内容区域会根据侧边栏宽度自动调整内边距

（1）外部可滚动容器不要设置padding、border等属性，否则会影响内部尺寸计算

（2）建议为侧边栏设置固定宽度，避免内容溢出

（3）在嵌套使用本组件时，需要正确设置 scrollContainer 属性来指定父级容器

用法示例

基础用法

当组件在嵌套的滚动容器中使用时，可以通过 scrollContainer 属性指定父级容器

导航栏

当前高度: 0px

内容区域一

内容区域二

高度: 0px

<template>
  <div>
    <div style="height: 40px; background-color: #eee;text-align: center;line-height: 40px;">导航栏</div>
    <div class="custom-scroll-container" ref="scrollContainerRef">
      <y-sticky-layout :scroll-container="scrollContainerRef">
        <template #left="{ height }">
          <div :style="{ height: height + 'px', width: '200px' }">
            当前高度: {{ height }}px
          </div>
        </template>

        <template #default>
          <div style="height: 800px; background-color: #ccc">
            内容区域一
          </div>
          <div style="height: 700px; background-color: #bbb">
            内容区域二
          </div>
        </template>

        <template #right="{ height }">
          <div class="right-sidebar">
            <div>高度: {{ height }}px</div>
          </div>
        </template>
      </y-sticky-layout>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';

const scrollContainerRef = ref<HTMLElement>();
</script>

<style scoped>
.custom-scroll-container {
  height: 500px;
  border: 1px solid #e4e7ed;
  overflow-y: auto;
  background: #f8f9fa;
}

.right-sidebar {
  width: 140px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
scroll-container	指定滚动容器，可以是CSS选择器字符串或HTMLElement对象。默认为 window	string / object	—

Slots

名称	说明	参数
default	主要内容区域，会根据左右侧边栏的内容自动调整宽度	—
left	左侧边栏区域	object
right	右侧边栏区域	object