Vue FlexLayout控件设计

Vue的组件化开发是很好用，所以封装了一下flex布局容器，上代码：

<template>
  <div class="flex-layout" :class="classes" :style="[styles]">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "FlexLayout",
    props: {
      basis: {type: String, default: "auto"},
      grow: {type: [Number, String], default: 0},
      shrink: {type: [Number, String], default: 1},
      alignItems: {type: String, default: "stretch"},
      container: {type: String, default: ""}
    },
    data() {
      return {
        typeClass: "",
        directionClass: "",
        styleObject: {}
      }
    },
    computed: {
      classes() {
        return {
          'container-row': this.container === 'row',
          'container-column': this.container === 'column'
        }
      },
      styles() {
        let style = {};
        this.alignItems !== 'stretch' ? style.alignItems = this.alignItems : '';
        this.grow !== 0 ? style.flexGrow = this.grow : '';
        this.shrink !== 1 ? style.flexShrink = this.shrink : '';
        this.basis !== 'auto' ? style.flexBasis = this.basis : '';
        return style;
      }
    }
  }
</script>

<style scoped>
  .container-row {
    display: flex;
    flex-direction: row;
  }

  .container-column {
    display: flex;
    flex-direction: column;
  }
</style>

一个组件适用于容器和子项。利用计算属性动态绑定class和style。