So verwenden Sie den JSON-Editor in VUE3

1. Schauen Sie sich zuerst die Renderings an.

2 Dies ist der JSON-Editor, den ich im vue3-Projekt verwende

npm install json-editor-vue3

yarn add json-editor-vue3

3. Führen Sie es in das Projekt ein

// 导入模块
import JsonEditorVue from 'json-editor-vue3'

// 注册组件
components: { JsonEditorVue },

4. Im Allgemeinen gibt das Backend JSON in das String-Format zurück. Wir übergeben es in dieser Form an das Backend und können es über die Daten zwischen JSON und String konvertieren vom Backend erhalten

// 后端拿到的数据
configValue："{\"isBigTree\":true,\"needContact\":true,\"needProvinceCity\":true,\"needDetailAddress\":true,\"needReservationCheckSms\":false,\"BigTreeReservationConfig\":{\"orderApiUrl\":\"https://api.bigtreedev.com/openplatform/openApi/api/order/create/notification/v001?sign=\",\"reservationApiUrl\":\"https://api.bigtreedev.com/openplatform/openApi/api/service/appointment/create/service/appointment/v001?sign=\",\"cancelApiUrl\":\"https://api.bigtreedev.com/openplatform/openApi/api/order/unsubscribe/notification/v001?sign=\",\"companyNo\":\"C400020\",\"verNo\":\"v001\",\"secretKey\":\"72CDFFD7F63D8662B6E1873FEA14EB24\",\"signSecretId\":\"0BBF774D11C0A053A6C2A2E36E6C6C2E2C55D483\"}}"
// 我们通过JSON.parse()进行转换
let isJson = JSON.parse(configValue) // 这样我们拿到的就是JSON格式的了，可以渲染出来的
// 我们传给后端的数据也要将JSON转成字符串，通过JSON.stringify()
let isString = JSON.stringify(configValue)  // 这样我们拿到的就是String格式的了，直接传给后端

5. Beispiel:

<template>
  <div>
    <json-editor-vue
        v-model="jsonData"
        class="editor"
        :current-mode="currentMode"
    />
  </div>
</template>
 
<script>
  // 导入模块
  import JsonEditorVue from &#39;json-editor-vue3&#39;
 
  export default defineComponent({
    name: &#39;EnterpriseList&#39;,
    //  注册组件
    components: {
      JsonEditorVue,
    },
    setup() {
      const state = reactive({
        currentMode: &#39;tree&#39;
      })
      return {
        ...toRefs(state),
      }
    },
  })
  }
</script>

6, Parameter

ParameterTypeDescriptionDefaultmodelValueObjectDer zu bearbeitende JSON-Wert ?? modeList Optionale Liste der BearbeitungsmodiSpracheenNameBeschreibung update:modelValuejson updatechangejson. updatetextSelect ionChange

			Array
[„Baum“, „Code“, „Formular“, „Text“, „Ansicht“]		Sprache	Array
		7, Ereignis

Beziehen Sie sich auf die entsprechenden Parameter der Konfigurationsoptionen, den ersten Parameter ist das Beispiel des Editors, die nachfolgenden Parameter sind die gleichen wie die offiziellen Parameter.

selectionChangeBeziehen Sie sich auf die entsprechenden Parameter der Konfigurationsoptionen. Die Parameter werden neu geschrieben sind die gleichen wie die offiziellen ParameterFokusReferenz Die Parameter, die den Konfigurationsoptionen entsprechen, werden überschrieben. Der erste Parameter ist die Instanz des Editors. Die folgenden Parameter sind die gleichen wie die offiziellen ParameterUnschärfe Beziehen Sie sich auf die Parameter, die den Konfigurationsoptionen entsprechen. Die folgenden Parameter sind die gleichen wie die offiziellen Parameter entsprechende Parameter der Konfigurationsoptionen. Der erste Parameter ist eine Instanz des Editors. Die folgenden Parameter sind die gleichen wie die offiziellen Parameter

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den JSON-Editor in VUE3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!