element-plus/es/el-col/index.js

A Component Library for Vue3.0

import { defineComponent, inject, computed, h } from 'vue';

const ElCol = defineComponent({
    name: 'ElCol',
    props: {
        tag: {
            type: String,
            default: 'div',
        },
        span: {
            type: Number,
            default: 24,
        },
        offset: {
            type: Number,
            default: 0,
        },
        pull: {
            type: Number,
            default: 0,
        },
        push: {
            type: Number,
            default: 0,
        },
        xs: {
            type: [Number, Object],
            default: () => ({}),
        },
        sm: {
            type: [Number, Object],
            default: () => ({}),
        },
        md: {
            type: [Number, Object],
            default: () => ({}),
        },
        lg: {
            type: [Number, Object],
            default: () => ({}),
        },
        xl: {
            type: [Number, Object],
            default: () => ({}),
        },
    },
    setup(props, { slots }) {
        const gutter = inject('ElRow', 0);
        const style = computed(() => {
            if (gutter) {
                return {
                    paddingLeft: gutter / 2 + 'px',
                    paddingRight: gutter / 2 + 'px',
                };
            }
            return {};
        });
        const classList = computed(() => {
            const ret = [];
            const pos = ['span', 'offset', 'pull', 'push'];
            pos.forEach(prop => {
                const size = props[prop];
                if (typeof size === 'number' && size > 0) {
                    ret.push(prop !== 'span' ? `el-col-${prop}-${props[prop]}` : `el-col-${props[prop]}`);
                }
            });
            const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
            sizes.forEach(size => {
                if (typeof props[size] === 'number') {
                    ret.push(`el-col-${size}-${props[size]}`);
                }
                else if (typeof props[size] === 'object') {
                    const sizeProps = props[size];
                    Object.keys(sizeProps).forEach(prop => {
                        ret.push(prop !== 'span' ? `el-col-${size}-${prop}-${sizeProps[prop]}` : `el-col-${size}-${sizeProps[prop]}`);
                    });
                }
            });
            if (gutter) {
                ret.push('is-guttered');
            }
            return ret;
        });
        return () => {
            var _a;
            return h(props.tag, {
                class: ['el-col', classList.value],
                style: style.value,
            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
        };
    },
});

ElCol.install = (app) => {
    app.component(ElCol.name, ElCol);
};

export default ElCol;