sync-scroll-container

功能

一个冻结顶部(Header)和左侧(Sidebar)的容器。

容器大小自适应父容器大小，父容器配置宽高属性

Header 高度、Sidebar 宽度由 slot 内容决定

尝试调整水平/垂直滚动条，观察顶部和左侧的冻结效果。

功能示例

展示区	slot: corner slot: header slot: sidebar slot: default
参数：阴影	是否
参数：边框	是否
Header 高度
Sidebar 宽度

最小示例

<template>
    <Wrapper>
        <div :class="$style.container">
            <VcSyncScrollContainer border>
                <template #corner>
                    <div>slot: corner</div>
                </template>
                <template #sidebar>
                    <div :class="$style.sidebar">slot: sidebar</div>
                </template>
                <template #header>
                    <div :class="$style.header">slot: header</div>
                </template>
                <div :class="$style.body">slot: default</div>
            </VcSyncScrollContainer>
        </div>
    </Wrapper>
</template>

<script lang="ts" setup>
import VcSyncScrollContainer from '../sync-scroll-container.vue'
</script>

<style lang="scss" module>
.container {
    width: 100%;
    height: 300px;
}

.header {
    height: 40px;
}

.sidebar {
    width: 100px;
}

.body {
    width: 1000px;
    height: 1000px;
}
</style>

API

参数

插槽