Vue-通过space了解jsx写法好处

ant-design的space挺好的，设计为了美观需要设置内容都是等距离展示，常见8px、16px、24px等

先看源码

import { defineComponent, VNode } from "vue";
import "./index.css";

function useChildren(slots: any) {
  const children =
    slots &&
    slots.default &&
    slots.default().map((x: VNode) => {
      return <div class="space__item">{x}</div>;
    });
  const node = <div class="space">{children}</div>;

  return node;
}

export default defineComponent({
  setup(props, { slots }) {
    const children = useChildren(slots);
    return () => children;
  },
});

.space {
  display: flex;
  gap: 8px;
}

引用

<script lang="ts" setup>
import Space from "./components/space";
</script>

<template>
  <Space>
    Space
    <button>Button</button>
    <div>Item</div>
    <span>Test</span>
  </Space>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

总结

代码量不是很复杂，通过这个可以了解vue的jsx写法好处，可以对内容二次处理例如slots.default()map处理，这样可扩张性就很强，和react一样