Einfügen einer Vue-Komponente

Das Einfügen einer Vue-Komponente ist ideal, wenn Sie eine bestehende Seite erweitern möchten, die möglicherweise nicht von Ihrem Modul erstellt wurde. Sie könnten zum Beispiel eine Vue-Komponente für Folgendes verwenden:

• Erstellen einer Registerkarte für eine CRUD-Komponente oder eine Einstellung
• Erstelle ein benutzerdefiniertes Formularfeld
• Erstelle ein dynamisches Popup

Unabhängig vom Grund läuft am Ende alles auf dasselbe hinaus. Du musst deine Vue-Komponente für NexoPOS verfügbar machen. Genau das werden wir behandeln.

Ein globales Ausgabe-Element in die Dashboard-Fußzeile einfügen

Seit NexoPOS 6x verlassen wir uns nun auf das Ereignis, um eine Ausgabe einzuspeisen. Tatsächlich ist es so, dass beim Rendern einer Seite mehrere Ereignisse ausgelöst werden. Es gibt ein Ereignis, das ausgelöst wird, wenn der Header gerendert wird, und ein weiteres, wenn der Footer gerendert wird. Anschließend verwenden wir dieses neueste Ereignis, um unsere Ausgabe hinzuzufügen.

<?php
namespace Modules\YourModule\Listeners;

use App\Events\RenderFooterEvent;

class RenderFooterEventListener
{
    function handle( RenderFooterEvent $event ) {
         $event->output->addView( 'YourModule::path.to.file' )
    }
}

Kopieren

Einer nsExtraComponents-Objektkomponente eine Vue-Komponente hinzufügen

Aus dieser globalen Perspektive können wir ein Script-Tag erstellen, das eine JavaScript-Datei lädt, oder ein Script-Tag, in dem die Vue-Komponente dem Objekt „nsExtraComponents“ hinzugefügt wird.

So registrierst du Vue-3-Komponenten auf NexoPOS 5x

<script type="module">
nsExtraComponents[ 'my-component' ]   =   defineComponent({
    template  : `<h1>Hello World</h1>`,
    mounted() {
      console.log( 'the component is mounted' )
    }
});
</script>

Jetzt wird die Komponente zur Haupt-Vue-Instanz hinzugefügt, die an „#dashboard-content“ angehängt ist. Um die Komponente darzustellen, musst du das Tag verwenden, das zum Schlüssel des Objekts passt, das zu „nsExtraComponents“ hinzugefügt wurde, so wie hier:

<my-component></my-component>

Ein Vorteil davon ist, dass alle integrierten Komponenten, die global verfügbar sind, auch für Ihre benutzerdefinierte Komponente verfügbar sind.