knowai/src/components/Container/index.vue

<template>
  <div
    class="k-container"
    :class="containerClass"
    :style="containerStyle"
  >
    <slot />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { ContainerProps } from './types';

export default defineComponent({
  name: 'KContainer',
  props: {
    fluid: {
      type: Boolean,
      default: false
    },
    maxWidth: {
      type: [String, Number],
      default: ''
    },
    padding: {
      type: [String, Number, Array],
      default: ''
    },
    margin: {
      type: [String, Number, Array],
      default: ''
    },
    center: {
      type: Boolean,
      default: true
    },
    bgColor: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: [String, Number],
      default: ''
    },
    shadow: {
      type: String as () => 'always' | 'hover' | 'never',
      default: 'never'
    }
  },
  setup(props: ContainerProps) {
    const containerClass = computed(() => {
      return [
        {
          'k-container--fluid': props.fluid,
          'k-container--center': props.center,
          [`k-container--shadow-${props.shadow}`]: props.shadow !== 'never'
        }
      ];
    });

    const containerStyle = computed(() => {
      const style: Record<string, string> = {};

      // 最大宽度
      if (props.maxWidth) {
        if (typeof props.maxWidth === 'number') {
          style.maxWidth = `${props.maxWidth}px`;
        } else {
          style.maxWidth = props.maxWidth;
        }
      }

      // 内边距
      if (props.padding) {
        if (typeof props.padding === 'number') {
          style.padding = `${props.padding}px`;
        } else if (Array.isArray(props.padding)) {
          if (props.padding.length === 1) {
            style.padding = `${props.padding[0]}px`;
          } else if (props.padding.length === 2) {
            style.padding = `${props.padding[0]}px ${props.padding[1]}px`;
          } else if (props.padding.length === 4) {
            style.padding = `${props.padding[0]}px ${props.padding[1]}px ${props.padding[2]}px ${props.padding[3]}px`;
          }
        } else {
          style.padding = props.padding;
        }
      }

      // 外边距
      if (props.margin) {
        if (typeof props.margin === 'number') {
          style.margin = `${props.margin}px`;
        } else if (Array.isArray(props.margin)) {
          if (props.margin.length === 1) {
            style.margin = `${props.margin[0]}px`;
          } else if (props.margin.length === 2) {
            style.margin = `${props.margin[0]}px ${props.margin[1]}px`;
          } else if (props.margin.length === 4) {
            style.margin = `${props.margin[0]}px ${props.margin[1]}px ${props.margin[2]}px ${props.margin[3]}px`;
          }
        } else {
          style.margin = props.margin;
        }
      }

      // 背景颜色
      if (props.bgColor) {
        style.backgroundColor = props.bgColor;
      }

      // 圆角
      if (props.borderRadius) {
        if (typeof props.borderRadius === 'number') {
          style.borderRadius = `${props.borderRadius}px`;
        } else {
          style.borderRadius = props.borderRadius;
        }
      }

      return style;
    });

    return {
      containerClass,
      containerStyle
    };
  }
});
</script>

<style lang="scss">
@use './index.scss' as *;
</style>