wux-weapp/packages/core/row/index.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/libs/classNames'

baseComponent({
    relations: {
        '../col/index': {
            type: 'child',
            observer() {
                this.updateStyle()
            },
        },
    },
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-row',
        },
        gutter: {
            value: 0,
            type: Number,
            observer: 'updateStyle',
        },
    },
    data: {
        rowStyle: '',
    },
    computed: {
        classes: ['prefixCls', function(prefixCls) {
            const wrap = classNames(prefixCls)

            return {
                wrap,
            }
        }],
    },
    methods: {
    	updateStyle(gutter = this.data.gutter) {
    		const elements = this.getRelationsByName('../col/index')
            const rowStyle = gutter > 0 ? `margin-left: ${gutter / -2}px; margin-right: ${gutter / -2}px` : ''
    		const colStyle = gutter > 0 ? `padding-left: ${gutter / 2}px; padding-right: ${gutter / 2}px` : ''

            if (elements.length > 0) {
                elements.forEach((element) => {
				    element.updateStyle(colStyle)
                })
            }

            this.setData({
            	rowStyle,
            })
    	},
    },
})