为 BlockGroup 设置 Vue 组件

Question

我正在尝试在 Piranha 中构建一个名为 Table 的自定义组件。它由一个名为 TableBlock 的 BlockGroup 组成，其中包含一个名为 TableRowBlock 的 BlockGroup，它本身包含一个类型为 TableCellField.

的字段列表

我以前从未在 BlockGroup 中嵌入 BlockGroup，不确定是否可行，但我希望如此。 BlockGroup 默认由 block-group（或 block-group-horizontal？）admin 中的 Vue 组件渲染，但我想用我自己的自定义 Vue 组件渲染它。

似乎即使我在 BlockGroup 上设置了组件属性，它也会忽略它并且它仍然默认为 BlockGroup 的默认组件之一，例如 block-group 或 block-group-水平.

有什么方法可以完成我想做的事情吗？

namespace Piranha.Extend.Blocks
{
    [BlockGroupType(Name = "Table", Category = "Content", Icon = "fas fa-images", Component = "table-block")]
    [BlockItemType(Type = typeof(TableRowBlock))]
    public class TableBlock : BlockGroup
    {
    }

    [BlockGroupType(Name = "Table Row", Category = "Content", Icon = "fas fa-images", Component = "table-row-block")]
    [BlockItemType(Type = typeof(TableCellField))]
    public class TableRowBlock : BlockGroup
    {
        public int RowNumber { get; set; }

        public override string GetTitle()
        {
            return "Row";
        }
    }
}

namespace Piranha.Extend.Fields
{
    [FieldType(Name = "TableCell", Shorthand = "Text", Component = "table-cell-field")]
    public class TableCellField : IField
    {
        public string Value { get; set; }
        public int ColumnNumber { get; set; }

        public string GetTitle()
        {
            return !string.IsNullOrEmpty(ColumnNumber.ToString()) ? ColumnNumber.ToString() : "";
        }
    }
}

这是“table-block”Vue 组件：

<template>
    <div :id="uid" class="block-group">
        <table>
            <template v-for="child in model.items">
                <component v-bind:is="child.meta.component" v-bind:uid="child.meta.uid" v-bind:toolbar="toolbar" v-bind:model="child.model"></component>
            </template>
        </table>
    </div>
</template>

<script>
    export default {
        props: ["uid", "toolbar", "model"],
        methods: {

        },
        mounted: function () {
            
        }
    }
</script>

这是“table-row-block”Vue 组件：

<template>
    <tr :id="uid" class="block-group">
        <template v-for="child in model.items">
            <component v-bind:is="child.meta.component" v-bind:uid="child.meta.uid" v-bind:toolbar="toolbar" v-bind:model="child.model" v-on:update-title="updateTitle($event)"></component>
        </template>
    </tr>
</template>

<script>
export default {
    props: ["uid", "toolbar", "model"],
    methods: {

    },
    mounted: function () {
        var self = this;
    }
}
</script>

这是“table-cell-field”Vue 组件：

<template>
    <td :id="uid">
        <input class="form-control" :placeholder="meta.placeholder" v-model="model.value" v-on:change="update()" type="text" />
        <input class="form-control" v-model="model.columnNumber" type="hidden" />
    </td>
</template>

<script>
    export default {
        props: ["uid", "model", "meta"],
        methods: {
            update: function () {
                
            }
        }
    }
</script>

这是我遇到的错误：

Answer 1

很遗憾，目前支持 none 您尝试执行的操作，这意味着：

块组不能包含其他块组，只能包含块。
块组不能有自定义的 vue 组件，它们使用管理器中选定的内置渲染。

第二个很容易支持，可以添加到服务版本中。但是，如果不认真重新设计编辑器，就无法添加第一个 UI/UX，因为内置模型不支持多个级别的集合。

当前数据模型的最佳解决方案是简单地向指定列数的 Table 块添加一个全局字段。如果添加了支持，则可以在呈现自定义块组组件时使用它。

为 BlockGroup 设置 Vue 组件

Setting the Vue Component for a BlockGroup

piranha-cms