wxlitian/miniprogram/components/row/row.ts

import { ComputeColStyle, ComputeRowStyle } from './calc'

Component({
  options: {
    addGlobalClass: true,
  },

  externalClasses: ['n-class'],

  relations: {
    '../col/col': {
      type: 'child',
    },
  },

  /**
   * 组件的属性列表
   */
  properties: {
    gutter: {
      type: Number,
      optionalTypes: [Array],
      value: 0,
      observer(newval) {
        let passStyle = this.data.style
        if (passStyle.length > 0) {
          if (!passStyle.endsWith(';')) passStyle += ';'
        }
        this.setData({
          computedStyles: passStyle + ComputeRowStyle(newval),
        })
      },
    },
    style: String,
  },

  observers: {
    gutter() {
      this.updateChildren()
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    computedStyles: '',
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    ready() {
      this.updateChildren()
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    updateChildren() {
      const items = this.getRelationNodes('../col/col')
      if (items && items.length > 0) {
        items.forEach((item) => {
          let passStyle = item.data.style
          if (passStyle.length > 0) {
            if (!passStyle.endsWith(';')) passStyle += ';'
          }
          item.setData({
            computedStyles: passStyle + ComputeColStyle(this.data.gutter),
          })
        })
      }
    },
  },
})