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

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

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

baseComponent({
    relations: {
        '../grid/index': {
            type: 'child',
            observer() {
                this.callDebounceFn(this.changeCurrent)
            },
        },
    },
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-grids',
        },
        col: {
            type: Number,
            value: 3,
            observer: 'changeCurrent',
        },
        bordered: {
            type: Boolean,
            value: true,
            observer: 'changeCurrent',
        },
        square: {
            type: Boolean,
            value: false,
            observer: 'changeCurrent',
        },
    },
    computed: {
        classes: ['prefixCls, bordered', function(prefixCls, bordered) {
            const wrap = classNames(prefixCls, {
                [`${prefixCls}--bordered`]: bordered,
            })

            return {
                wrap,
            }
        }],
    },
    methods: {
        changeCurrent() {
            const elements = this.getRelationsByName('../grid/index')
            const { col, bordered, square } = this.data
            const colNum = parseInt(col) > 0 ? parseInt(col) : 1
            const width = `${100 / colNum}%`

            if (elements.length > 0) {
                elements.forEach((element, index) => {
                    element.changeCurrent(width, bordered, square, index)
                })
            }
        },
    },
})