Gestalten Sie die Oberflächenansicht des Komponenteneditors des Shopware Management CMS neu

Question

Beim Erstellen eines neuen CMS-Elements zur Verwendung im WYSIWYG-Editor haben wir drei Komponenten: eine mit dem Namen component und eine weitere mit dem Namen ;code>previewComponent.

Die

configComponent wird offensichtlich verwendet, um die Konfiguration des Elements auszuwählen, während die component-Komponente verwendet wird, um die Ansicht im Editor zu aktualisieren. Zeigen Sie beispielsweise den im Konfigurationsabschnitt ausgewählten Inhalt an. Mein Problem ist, dass die Ansicht im Editor erst aktualisiert wird, nachdem der Benutzer auf die Schaltfläche „Speichern“ geklickt hat, was zu einer schlechten Benutzererfahrung führt – die Aktualisierung sollte in Echtzeit erfolgen.

Ich glaube, ich muss irgendwie ein Update-Ereignis $emit aussenden, nachdem ich die Entitäts-ID aus configComponent ausgewählt habe ID der ausgewählten Entität zur Komponente

Also, im Zweig von component habe ich den folgenden Code:

 <config-component @entity-picked="entityPickedHandler" />

Nach meinem Verständnis der Dokumentation sollte dies aufgerufen werden, wenn das Ereignis entity-picked von configComponent ausgegeben wird ; „entityPickedHandler“-Methode.

Dies ist beispielsweise der Ereignishandler in component:

methods: {
  entityPickedHandler(data) {
    console.log('Trigger-Ereignis:', Daten);
  }
}

Dann geben Sie das Ereignis von configComponent aus:

berechnet: {
  myEntity: {
    erhalten() {
      return this.element.config.entity.value;
    },

    set(Wert) {
      // this.$set(this.element.data, 'entityId', value);
      this.element.config.entity.value = Wert;
      console.log('Versuchen Sie, ein von der Entität ausgewähltes Ereignis auszugeben');
      this.$emit('entity-picked', value);
    }
  }
}

Offensichtlich funktioniert dies nicht, da console.log() im entityPickedHandler Das Ereignis hätte jedoch ausgegeben werden müssen.

Answer 1

Getter/Setter在作用域方面可能有些棘手。通常的做法看起来是正确的。也许可以尝试将实体存储在一个数据属性中，并在其上设置一个监听器。

data() {
    return {
        entity: this.element.config.entity.value,
    };
},

watch: {
    entity(value) {
        this.$emit('entity-picked', value);
    },
},

methods: {
    entityChanged(value) {
        this.element.config.entity.value = value;
        this.entity = value;
    },
},

更新
或者在component组件内部作为一个监听器：

watch: {
    'element.data.entityId': {
        handler() {
            this.entityId = this.element.data.entityId;
        },
        deep: true,
    }
}

然后可以使用以下方式从configComponent更新数据：

computed: {
    myentity: {
        get() {
            return this.element.config.myEntity.value;
        },

        set(value) {
            this.element.config.myentity.value = value;
            this.$set(this.element.data, 'entityId', value);
            this.$emit('element-update', this.element);
        }
    }
},

然后，在configComponent的twig文件中，myentity方法用于sw-entity-single-select的v-model：

{% block sw_cms_element_team_box_config %}
    <sw-entity-single-select label="testing my entity" entity="myexample_entity" v-model="myentity" />
{% endblock %}