我這里使用的是vue3，vue2的話建議看官方文檔https://github.com/dirkliu/vue-json-editor
安裝：npm install vue-json-editor --save

template><div><vueJsonEditor:value="caseForm['parameters']['value']":show-btns="false":mode="'text'"lang="zh"@json-change="onJsonChange"@json-save="onJsonSave"@has-error="onError"></vueJsonEditor></div> </template> <script lang="ts">import vueJsonEditor from 'vue-json-editor'export default defineComponent({setup() {const onJsonChange = (value: any) => {onJsonSave(value);};const onJsonError = (value: any) => {//json參數格式錯誤時執行的方法};const onJsonSave = (value: any) => {state.caseForm['parameters']['value'] = value;};return {onJsonSave,onJsonError,onJsonChange,}} }) </script>

備注：這里如果mode的值使用的是code的話輸入中文的話，會有重影，而且輸入中文會有問題，故使用text這個值,如果使用這個還不滿意，建議直接和需求人說：這個需求我做不了【手動滑稽】

總結

以上是生活随笔為你收集整理的vue-json-editor实现json编辑器并且可以正常输入中文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。