<template>
|
<PageWrapper title="滚动组件示例" content="基于el-scrollbar">
|
<div class="scroll-wrap">
|
<ScrollContainer class="mt-4">
|
<ul class="p-3">
|
<template v-for="index in 100" :key="index">
|
<li class="p-2" :style="{ border: '1px solid #eee' }">
|
{{ index }}
|
</li>
|
</template>
|
</ul>
|
</ScrollContainer>
|
</div>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { ScrollContainer } from '@/components/Container';
|
import { PageWrapper } from '@/components/Page';
|
</script>
|
<style lang="less" scoped>
|
.scroll-wrap {
|
width: 50%;
|
height: 300px;
|
background-color: @component-background;
|
}
|
</style>
|
