重新设计Shopware管理CMS组件编辑器的界面视图
P粉797855790
2023-08-14 12:07:32
<p>在创建一个新的CMS元素,用于Shopware的所见即所得编辑器中,我们有三个组件:一个名为<code>component</code>,另一个名为<code>configComponent</code>,还有一个名为<code>previewComponent</code>。</p>
<p><code>configComponent</code>显然用于选择元素的配置,而<code>component</code>组件用于更新编辑器中的视图。例如,显示在配置部分中选择的内容。我的问题是,它只会在用户点击保存按钮后才会更新编辑器中的视图,这会导致糟糕的用户体验 - 它应该实时更新。</p>
<p><strong>我认为我需要在从<code>configComponent</code>选择实体ID后以某种方式<code>$emit</code>一个更新事件</strong>,然后将所选实体的ID传递给<code>component</code>组件。</p>
<p>所以,在<code>component</code>的twig中,我有以下代码:</p>
<pre class="brush:js;toolbar:false;"> <config-component @entity-picked="entityPickedHandler" />
</pre>
<p>根据我对文档的理解,这应该在从<code>configComponent</code>发出<code>entity-picked</code>事件时调用<code>component</code>中的"entityPickedHandler"方法。</p>
<p>例如,这是<code>component</code>中的事件处理方法:</p>
<pre class="brush:js;toolbar:false;">methods: {
entityPickedHandler(data) {
console.log('触发事件:', data);
}
}
</pre>
<p>然后,从<code>configComponent</code>中发出事件:</p>
<pre class="brush:js;toolbar:false;">computed: {
myEntity: {
get() {
return this.element.config.entity.value;
},
set(value) {
// this.$set(this.element.data, 'entityId', value);
this.element.config.entity.value = value;
console.log('尝试发出entity-picked事件');
this.$emit('entity-picked', value);
}
}
}
</pre>
<p>显然,这不起作用,因为<code>entityPickedHandler</code>处理程序中的<code>console.log()</code>从未输出。然而,事件应该已经发出了。</p>
Getter/Setter在作用域方面可能有些棘手。通常的做法看起来是正确的。也许可以尝试将实体存储在一个数据属性中,并在其上设置一个监听器。
更新
或者在
component
组件内部作为一个监听器:然后可以使用以下方式从
configComponent
更新数据:然后,在
configComponent
的twig文件中,myentity
方法用于sw-entity-single-select
的v-model
: