为 BlockGroup 设置 Vue 组件答案

【问题标题】：Setting the Vue Component for a BlockGroup为 BlockGroup 设置 Vue 组件
【发布时间】：2021-12-14 09:42:45
【问题描述】：

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

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

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

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

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>

这是我得到的错误：

【问题讨论】：

标签： piranha-cms

【解决方案1】：

很遗憾，目前不支持您尝试做的任何事情，这意味着：

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

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

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

【讨论】：