vue3的第三方插件 實現json編輯器

• 安裝依賴

npm i vue3-ace-editor

• 引入

import {reactive,defineComponent} from 'vue' import {VAceEditor} from 'vue3-ace-editor';import "ace-builds/webpack-resolver";import 'ace-builds/src-noconflict/mode-json';import 'ace-builds/src-noconflict/theme-chrome';import 'ace-builds/src-noconflict/ext-language_tools';

• 使用 要設置高度，本身沒有高度

<v-ace-editorv-model:value="dataForm.textareashow"@init="initFail"lang="json":theme="aceConfig.theme":options="aceConfig.options":readonly="aceConfig.readOnly"style="height:300px"class="ace-editor"/>

• 初始化

注意 ： JSON.stringify(dataForm.Example,null,2)，將json數據格式化，不然顯示在一行

<script lang='ts'> import { ref,reactive,defineComponent} from 'vue' import {VAceEditor} from 'vue3-ace-editor'; import "ace-builds/webpack-resolver"; import 'ace-builds/src-noconflict/mode-json'; import 'ace-builds/src-noconflict/theme-chrome'; import 'ace-builds/src-noconflict/ext-language_tools'; export default defineComponent({components: {VAceEditor},setup(props, context) {//ace編輯器配置const aceConfig = reactive({lang: 'json', //解析jsontheme: 'chrome', //主題readOnly: false, //是否只讀options: {enableBasicAutocompletion: true,enableSnippets: true,enableLiveAutocompletion: true,tabSize: 2,showPrintMargin: false,fontSize: 13}});//formconst dataForm = reactive({Example: {abc:'123',def:'345',ghi:{abc:'123',def:'345',},jkl:[{abc:'123',def:'345',},{abc:'123',def:'345',}]},textareashow:''});//initconst initFail = () => {dataForm.textareashow = JSON.stringify(dataForm.Example,null,2)};// 返回值return {aceConfig,dataForm, initFail}} }) </script>

• 結果展示

• 若報錯如圖
  
  解決方法
  

參考文章鏈接 ——————>

總結

以上是生活随笔為你收集整理的vue3中json编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

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