| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="滚动组件示例" content="基于el-scrollbar"> |
| 03b602 | 3 | <div class="scroll-wrap"> |
| 2f6253 | 4 | <ScrollContainer class="mt-4"> |
| 陈 | 5 | <ul class="p-3"> |
| 6 | <template v-for="index in 100" :key="index"> | |
| 9edc28 | 7 | <li class="p-2" :style="{ border: '1px solid #eee' }"> |
| V | 8 | {{ index }} |
| 9 | </li> | |
| 2f6253 | 10 | </template> |
| 陈 | 11 | </ul> |
| 12 | </ScrollContainer> | |
| 13 | </div> | |
| 31ff05 | 14 | </PageWrapper> |
| 2f6253 | 15 | </template> |
| 陈 | 16 | <script lang="ts"> |
| 17 | import { defineComponent } from 'vue'; | |
| 18 | import { ScrollContainer } from '/@/components/Container/index'; | |
| 31ff05 | 19 | import { PageWrapper } from '/@/components/Page'; |
| V | 20 | |
| 2f6253 | 21 | export default defineComponent({ |
| 9edc28 | 22 | components: { ScrollContainer, PageWrapper }, |
| 2f6253 | 23 | }); |
| 陈 | 24 | </script> |
| 03b602 | 25 | <style lang="less" scoped> |
| N | 26 | .scroll-wrap { |
| 27 | width: 50%; | |
| 28 | height: 300px; | |
| 5b8eb4 | 29 | background: @component-background; |
| 03b602 | 30 | } |
| N | 31 | </style> |
