@open-dy/tt-miniprogram-plus/col/index.js

字节小程序组件扩展包

'use strict';

var index = require('../index.js');

function parseFlex(flex) {
    if (typeof flex === 'number') {
        return `${flex} ${flex} auto`;
    }
    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
        return `0 0 ${flex}`;
    }
    return flex;
}
Component({
    options: {
        applyFragment: true,
    },
    properties: {
        gutter: {
            type: Number,
            value: 0,
            observer(gutter) {
                const horizontalGutter = gutter / 2;
                this.setData({
                    paddingLeft: horizontalGutter,
                    paddingRight: horizontalGutter,
                });
            },
        },
        span: {
            type: Number,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        offset: {
            type: Number,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        order: {
            type: Number,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        pull: {
            type: Number,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        push: {
            type: Number,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        flex: {
            type: null,
            value: undefined,
            observer(val) {
                if (typeof val !== 'string' && typeof val !== 'number') {
                    this.setData({
                        baseFlex: '',
                    });
                }
                this.setData({
                    baseFlex: `flex: ${parseFlex(val)};`,
                });
            },
        },
        xs: {
            type: null,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        sm: {
            type: null,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        md: {
            type: null,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        lg: {
            type: null,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        xl: {
            type: null,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
        xxl: {
            type: null,
            value: -1,
            observer() {
                if (this.data.hasInitClasses)
                    this.updateClasses();
            },
        },
    },
    data: {
        classes: '',
        paddingLeft: 0,
        paddingRight: 0,
        baseFlex: '',
        flexVar: '',
        hasInitClasses: false,
    },
    created() {
        this.updateClasses();
    },
    methods: {
        updateClasses() {
            const classes = index.classNames('tt-col', {
                [`tt-col-${this.data.span}`]: this.data.span !== -1,
                [`tt-col-offset-${this.data.offset}`]: this.data.offset !== -1,
                [`tt-col-order-${this.data.order}`]: this.data.order !== -1,
                [`tt-col-pull-${this.data.pull}`]: this.data.pull !== -1,
                [`tt-col-push-${this.data.push}`]: this.data.push !== -1,
            }, ...this.screenSizeClass('xs'), ...this.screenSizeClass('sm'), ...this.screenSizeClass('md'), ...this.screenSizeClass('lg'), ...this.screenSizeClass('xl'), ...this.screenSizeClass('xxl'));
            const flexVar = [
                this.screenSizeFlex('xs'),
                this.screenSizeFlex('sm'),
                this.screenSizeFlex('md'),
                this.screenSizeFlex('lg'),
                this.screenSizeFlex('xl'),
                this.screenSizeFlex('xxl'),
            ].join('');
            this.setData({
                classes,
                flexVar,
                hasInitClasses: true,
            });
        },
        screenSizeClass(screen) {
            const classList = [];
            if (typeof this.data[screen] === 'number' && this.data[screen] !== -1) {
                classList.push(`tt-col-${screen}-${this.data[screen]}`);
            }
            else if (typeof this.data[screen] === 'object') {
                typeof this.data[screen].offset === 'number' &&
                    classList.push(`tt-col-${screen}-offset-${this.data[screen].offset}`);
                typeof this.data[screen].push === 'number' &&
                    classList.push(`tt-col-${screen}-push-${this.data[screen].push}`);
                typeof this.data[screen].pull === 'number' &&
                    classList.push(`tt-col-${screen}-pull-${this.data[screen].pull}`);
                typeof this.data[screen].span === 'number' &&
                    classList.push(`tt-col-${screen}-${this.data[screen].span}`);
                typeof this.data[screen].order === 'number' &&
                    classList.push(`tt-col-${screen}-order-${this.data[screen].order}`);
                (typeof this.data[screen].flex === 'string' ||
                    typeof this.data[screen].flex === 'number') &&
                    classList.push(`tt-col-${screen}-flex`);
            }
            return classList;
        },
        screenSizeFlex(screen) {
            if (typeof this.data[screen] === 'object') {
                if (typeof this.data[screen].flex === 'string' ||
                    typeof this.data[screen].flex === 'number') {
                    return `--tt-col-${screen}-flex:${parseFlex(this.data[screen].flex)};`;
                }
            }
            return '';
        },
    },
});