vue封装一个flex组件

好的，以下是一个简单的 Vue Flex 组件的封装示例：

<template>
  <div :class="['flex', flexDirection, justifyContent, alignItems]">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Flex',
  props: {
    direction: {
      type: String,
      default: 'row'
    },
    justify: {
      type: String,
      default: 'flex-start'
    },
    align: {
      type: String,
      default: 'stretch'
    }
  },
  computed: {
    flexDirection() {
      return `flex-${this.direction}`;
    },
    justifyContent() {
      return `justify-content: ${this.justify}`;
    },
    alignItems() {
      return `align-items: ${this.align}`;
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
}
</style>

使用方式：

<template>
  <Flex direction="column" justify="center" align="center">
    <div>这是一个 Flex 组件</div>
    <div>可以自由组合子元素</div>
    <div>灵活布局</div>
  </Flex>
</template>

<script>
import Flex from './Flex.vue';

export default {
  components: {
    Flex
  }
}
</script>

这个组件接受三个 props，分别是 `direction`、`justify` 和 `align`，分别对应了 flex 容器的三个属性。在组件内部使用了计算属性来生成对应的类名和样式。在模板中使用了 `slot` 来接收子元素，以便于自由组合。