【17.0.5】如何开发自定义容器组件且支持嵌入基础组件

调研编号：SJS-23771
LastReview:2024-4-15




以下是我想做的一个容器实例，如果我想要在配置的时候支持children，children中书写基础组件类型能够正常渲染，如下图所示，那么，在组件自定义的过程中我应该怎么操作呢？




import GC from '@grapecity/spread-sheets-designer'

// 构建组件类结构
function defineComponent() {
  function CustomCompFn() {
    GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments)
  }
  CustomCompFn.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase()

  // 此函数用于定义组件的innerHTML
  CustomCompFn.prototype.getTemplate = function () {
    console.log('是否获取模板')
    return `
      <div class="mg-flex-list"></div>
    `
  }
  CustomCompFn.prototype.onInit = function () {}

  // 现在主机元素已经附加到DOM中，您可以向其中添加事件侦听器
  CustomCompFn.prototype.onMounted = function (host) {
    host.style.cssText = this._options.style || ''
    this._eventListener = function (e) {
      console.log('点击事件', e)
    }
    console.log('onMounted', host)
    // 对每个list元素添加事件
    // document.getElementsByClassName('mg-flex-list')
  }
  CustomCompFn.prototype._attachEvent = function () {
    var r = this
    this.host.addEventListener('click', this._eventListener)
  }
  CustomCompFn.prototype.onValueChanged = function (prevValue, nextValue, host) {}

  // 此函数将在raiseValueChanged()之后调用
  CustomCompFn.prototype.updateValue = function (host) {}

  // 解除事件的绑定
  CustomCompFn.prototype.onDestroy = function (host) {
    // 销毁事件
    this.host.removeEventListener('click', this._eventListener)
  }
  return CustomCompFn
}
const MgFlexContainer = defineComponent()
GC.Spread.Sheets.Designer.Designer.RegisterComponent('MgFlexContainer', MgFlexContainer)

您好，经调研，您目前的想法暂不支持在设计器中使用，设计器中的容器概念不是原子组件，所以暂时不支持自定义。目前设计器中仅支持重复使用现有的容器类型。

您好，可以参考一下这个链接中的内容来实现：https://demo.grapecity.com.cn/sp ... t-doc-content_title

Joestar.Xu 发表于 2024-4-7 19:14
您好，可以参考一下这个链接中的内容来实现：https://demo.grapecity.com.cn/spreadjs/help/docs/designer/ ...

我就是参考这个例子做的，像官方的容器组件会自动渲染children里的子组件，如果是一个自定义容器组件，具备这个能力，我是不是需要在某个方法里自定义children组件的渲染呢？

我理解一下，您目前的需求是在您自己的自定义组件中，添加您第一个图中的children组件，并且能够正常渲染吗？

您目前想要具体实现的效果又是什么呢？

Joestar.Xu 发表于 2024-4-8 15:09
我理解一下，您目前的需求是在您自己的自定义组件中，添加您第一个图中的children组件，并且能够正常渲染吗 ...

是的，您理解的没有问题，就是想实现这么个简单的容器组件，能像Container和FlexContainer组件一样使用；这样我后续可以在该容器中添加一些自定义卡片组件或者是官方组件，通过该容器的参数控制，达到自定义排布效果。

但是目前看向自定义容器的children添加官方组件，内部应该是没有处理的，我应该怎么实现呢？麻烦您给解惑一下

了解了，为了避免混淆，我这边根据您描述的情况写了一个可以复现出您问题的Demo，您看一下这个Demo是否可以准确地表示您目前遇到的问题。

如下图所示Button未生效：

Joestar.Xu 发表于 2024-4-8 17:51
了解了，为了避免混淆，我这边根据您描述的情况写了一个可以复现出您问题的Demo，您看一下这个Demo是否可以 ...

我在您给的实例中修改了一下，主要是在文件模板出修改添加了自定义的容器组件，如下图所示

实际在页面中的效果如下图所示，那么问题来了，在自定义的容器我加了Button组件无法显示

您好，您描述的情况我了解了，这边调研一下，后续有进展我会在本贴中回复您。