Comment utiliser l'éditeur JSON dans VUE3

1. Jetez d'abord un œil aux rendus. Vous pouvez choisir d'afficher l'effet par vous-même

2 Il s'agit de l'éditeur JSON que j'utilise dans le projet vue3.

npm install json-editor-vue3

yarn add json-editor-vue3

3. Introduisez-le dans le projet

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

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

4 Généralement, ce que le backend renvoie est de convertir JSON au format String

Nous le transmettons au backend sous cette forme, et nous pouvons convertir entre JSON et String via les données. obtenu par le backend

// 后端拿到的数据
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. Exemple :

<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, Paramètres

ParamètreTypeDescriptionDefaultmodelValueObjectLa valeur json à modifier optionsObjectoptions de l'éditeur json, reportez-vous aux options de configurationcurrentModeStringmode d'édition actuelcode modeListArray Liste facultative des modes d'édition[" tree", "code", "form", "text", "view"]langueArraylangueen7, événement

NomDescription update:modelValuejson updatechangejson updatetextSelectionChange Référez-vous aux paramètres correspondants des options de configuration, le premier paramètre est l'exemple de l'éditeur, les paramètres suivants sont les mêmes que les paramètres officielsselectionChangeRéférez-vous aux paramètres correspondants des options de configuration, les paramètres sont réécrits, le premier paramètre est l'instance de l'éditeur, les paramètres suivants sont les mêmes que les paramètres officielsfocusRéférence Les paramètres correspondant aux options de configuration sont remplacés. Le premier paramètre est l'instance de l'éditeur. Les paramètres suivants sont les mêmes que les paramètres officielsblur. . Reportez-vous aux paramètres correspondant aux options de configuration. Les paramètres sont remplacés. Le premier paramètre est une instance de l'éditeur. Les paramètres suivants sont les mêmes que les paramètres officielscolorPicker.

. paramètres correspondants des options de configuration. Les paramètres sont réécrits. Le premier paramètre est une instance de l'éditeur. Les paramètres suivants sont les mêmes que les paramètres officiels

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!