index.vue 860 B

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