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

Copier après la connexion

3. Introduisez-le dans le projet

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

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

Copier après la connexion

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

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>

Copier après la connexion

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!