horizontal-scroll.vue 560 B

12345678910111213141516171819202122232425262728
  1. <template>
  2. <el-scrollbar>
  3. <div class="scrollbar-flex-content">
  4. <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
  5. {{ item }}
  6. </p>
  7. </div>
  8. </el-scrollbar>
  9. </template>
  10. <style scoped>
  11. .scrollbar-flex-content {
  12. display: flex;
  13. }
  14. .scrollbar-demo-item {
  15. flex-shrink: 0;
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. width: 100px;
  20. height: 50px;
  21. margin: 10px;
  22. text-align: center;
  23. border-radius: 4px;
  24. background: var(--el-color-danger-light-9);
  25. color: var(--el-color-danger);
  26. }
  27. </style>