index.vue 654 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div class="row-default">
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import { computed, ref,useSlots,h,provide } from 'vue-demi'
  8. export default {
  9. name: 'm-row',
  10. props: {
  11. gutter: Number
  12. },
  13. setup(props) {
  14. const $slot = useSlots();
  15. const gutter = computed(() => props.gutter)
  16. provide('gutter',gutter)
  17. return () => [
  18. h(
  19. 'div',
  20. {
  21. className: 'row-default'
  22. },
  23. $slot.default()
  24. )
  25. ]
  26. }
  27. }
  28. </script>
  29. <style lang="scss" scoped>
  30. .row-default{
  31. display: flex;
  32. flex-wrap: wrap;
  33. position: relative;
  34. box-sizing: border-box;
  35. margin-bottom: 20px;
  36. }
  37. </style>