customized-size.vue 567 B

12345678910111213141516171819202122
  1. <template>
  2. <el-slider v-model="size" />
  3. <el-space wrap :size="size">
  4. <el-card v-for="i in 2" :key="i" class="box-card" style="width: 250px">
  5. <template #header>
  6. <div class="card-header">
  7. <span>Card name</span>
  8. <el-button class="button" text>Operation button</el-button>
  9. </div>
  10. </template>
  11. <div v-for="o in 4" :key="o" class="text item">
  12. {{ 'List item ' + o }}
  13. </div>
  14. </el-card>
  15. </el-space>
  16. </template>
  17. <script lang="ts" setup>
  18. import { ref } from 'vue'
  19. const size = ref(20)
  20. </script>