VUE3でJSONエディタを使用する方法

1. まずレンダリングを見てください。効果を自分で表示するかどうかを選択できます。

2. これは、vue3 プロジェクトで使用する JSON エディタですまず、サードパーティのプラグインを導入します

npm install json-editor-vue3

yarn add json-editor-vue3

3。それをプロジェクトに導入します

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

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

4。通常、バックエンドは JSON を文字列形式で返します

これはまた、それをバックエンドに渡す方法も説明します。この形式では、バックエンド

// 后端拿到的数据
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 から取得したデータを通じて JSON と String の間で変換できます。例:

<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。パラメータ

##[“tree” 、「コード」、「フォーム」、「テキスト」、「ビュー」]##言語7. イベント

パラメータ	タイプ	説明	デフォルト
modelValue	Object	編集する json 値
options	オブジェクト	jsoneditor オプション。構成オプションを参照してください。
currentMode	String	現在の編集モード	code
modeList	Array	オプションの編集モードリスト
配列	言語	ja

名前update:modelValuechangetextSelectionChangeselectionChangefocusblurcolorPicker

説明
json update
json update
configuration-optionsの対応するパラメータを参照します。パラメータは書き換えられます。最初のパラメータはエディタのインスタンスです。以降のパラメータは公式パラメータと同じです。
設定オプションの対応するパラメータを参照 パラメータを書き換える 最初のパラメータはエディタのインスタンス 以降のパラメータは公式パラメータと同じ.
Reference Configuration-options はパラメータに対応しており、パラメータは書き換えられます。最初のパラメータはエディタのインスタンスで、後続のパラメータは
configuration-options を参照 対応するパラメータ、パラメータが書き換えられ、最初のパラメータはエディタのインスタンス、それ以降のパラメータ公式パラメータと同じです
configuration-optionsの対応するパラメータを参照してください。パラメータは書き換えられています。最初のパラメータは、エディターで使用され、その後のパラメーターは公式パラメーターと同じです。

以上がVUE3でJSONエディタを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。