Das Vue-Json-Viewer-Plug-In realisiert die Anzeige von JSON-Daten auf der Seite [hervorheben, faltbar, kopierbar]

Mit dem Vue-Json-Viewer-Plug-In können Sie mit diesem Plug-In schnell und einfach die drei Funktionen Hervorheben, JSON-Falten und Kopieren implementieren ! ! !

Offizielle Website-Adresse: https://www.npmjs.com/package/vue-json-viewer

Zeige Ergebnisse

Anzuzeigende JSON-Daten:

{
  "Data": {
    "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEudVwiLCBpdGVtcylcblxuICAgICAgICBleHBvcnRKU09OID0gY3JlYXRlRXhwb3J0KGl0ZW1zKVxuICAgICAgICBVcGxvYWRCaW5hcnkoXCJOYW1lLERhdGEsQXBwbGljYXRpb25JZCxEYXRhTWltZVRFwiLCBcInNldFwiLCAkQnVmZmVyS2V5LCBKU09ORW5jb2RlKGJ1ZmZlcl9kYXRhKSlcbiAgICAgICAgJHJlc3VsdCA9IGJ1ZmZlcl9kYXRhW1wiYmluYXJ5X2lkXCJdXG4gICAgfVxufSIsDQogICAgICAgICAgICAiVHlwZSI6ICJjb250cmFjdHMiDQogICAgICAgIH0NCiAgICBdDQp9",
    "MimeType": "application/json",
    "Name": "system.json"
  }
}

Stellen wir den endgültigen Effekt an die erste Stelle:

Nachdem wir die Auswirkungen gesehen haben, kommen wir zu den praktischen Dingen!

Installieren Sie das Vue-Json-Viewer-Plug-In

NPM-basierte Installation:

$ npm install vue-json-viewer --save

Garnbasierte Installation:

$ yarn add vue-json-viewer

Code

Importieren Sie das Paket im Skript

import Vue from 'vue';
import JsonViewer from 'vue-json-viewer';
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer);

Führen Sie Folgendes in das Vue-Projekt ein: jsonData muss Daten vom Typ JSON sein.

  <div class="block-content-single-item">
        <label class="block-content-label">{
   
   { $t('parameters') }}</label>
        <span class="block-content-text">
          <json-viewer
            :value="jsonViewer"
            :expand-depth="5"
            :copyable="copyable"
            boxed
            sort
            @copied="onCopy"
          ></json-viewer>
        </span>
      </div>

Nachdem die statischen Dateien und Importe geschrieben wurden, definieren Sie im Skript jsonData und weisen Sie ihm einen Wert zu.

1. Hartcodierte Implementierung:

export default {
  data() {
    return {
      jsonData: {
        name: 'renlei',
        age: 18
      },
      copyable: {
        copyText: this.$t('share'),
        copiedText: this.$t('shared'),
        timeout: 2000
      },
    };
  },

2. Dynamische Zuweisungsimplementierung

Wenn der Wert dynamisch zugewiesen wird, handelt es sich bei den zurückgegebenen Hintergrunddaten möglicherweise um ein JSON-Zeichen, das eine JSON-Zeichenfolge vom Typ String erfordert und in das JSON-Format konvertiert wird, bevor es verwendet werden kann. Kopieren Sie dann die verarbeiteten Daten nach jsonData, andernfalls wird ein Fehler gemeldet.

Optionale Konfigurationsbeschreibung

<json-viewer
:value="jsonData"
:expand-third=5
kopierbare
Boxsortierung
></json-viewer>

Parameter	veranschaulichen	Standardwert
`value`	JSON-Daten (unterstützt und `v-model使用`)	Erforderlich
`expand-depth`	In dieser Tiefe weiteres Absinken	`1`
`copyable`	Zeigen Sie die Schaltfläche „Kopieren“ an. Sie können den Kopiertext anpassen, indem Sie einfach {copy text:'copy', kopiertText:'copied'} festlegen oder auf true setzen, um den Standard-copyText zu verwenden	`false`
`sort`	Sortierschlüssel vorne anzeigen	`false`
`boxed`	Fügen Sie der Komponente einen ausgefallenen „Box“-Stil hinzu	`false`
`theme`	Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um Themen zu erstellen	`jv-light`

Zuhörer

Hörer	Beschreibung	Wert
`copied`	Gibt copyEvent aus, nachdem der Text kopiert wurde	Erfolgsereignis in der Zwischenablage

Wenn wir nach dem Klicken auf Cody nach dem Kopieren die Antwortinformationsaufforderung sehen möchten, müssen wir eine Ereignisüberwachung für die Kopie durchführen. Zu diesem Zeitpunkt müssen wir ein @copied-Ereignis hinzufügen.