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

字节小程序组件扩展包

'use strict';

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

function parseGutter(val) {
    if (typeof val === 'number') {
        return `column-gap: ${val}px`;
    }
    if (/^\d+(\.\d+)?(px|rpx|em|rem|%)$/.test(val)) {
        return `column-gap: ${val}`;
    }
    return '';
}
Component({
    relations: {
        '../col-help': {
            type: 'descendant',
        },
    },
    properties: {
        align: {
            type: String,
            value: 'top',
            observer() {
                this.updateClasses();
            },
        },
        justify: {
            type: String,
            value: 'start',
            observer() {
                this.updateClasses();
            },
        },
        wrap: {
            type: Boolean,
            value: true,
            observer() {
                this.updateClasses();
            },
        },
        gutter: {
            type: null,
            value: 0,
            observer(val) {
                this.setData({
                    columnGap: parseGutter(val),
                });
            },
        },
    },
    data: {
        classes: '',
        columnGap: '',
    },
    created() {
        this.setData({
            columnGap: parseGutter(this.data.gutter ?? 0),
        });
        this.updateClasses();
    },
    methods: {
        updateClasses() {
            const { align, justify, wrap } = this.data;
            const classes = index.classNames('tt-row', {
                [`tt-row-align-${align}`]: !!align,
                [`tt-row-justify-${justify}`]: !!justify,
                [`tt-row-no-wrap`]: !wrap,
            });
            this.setData({
                classes,
            });
        },
    },
});