Vue3 JSON编辑器


安装依赖

npm i vue3-ace-editor

使用示例

 <v-ace-editor
            v-model:value="dataForm.apiResFailExample"
            @init="initFail"
            :lang="aceConfig.lang"
            :theme="aceConfig.theme"
            :options="aceConfig.options"
            :readonly="aceConfig.readOnly"
            class="ace-editor"/>

<script lang="ts">      
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 = ref({
      lang: 'json', //解析json
      theme: 'chrome', //主题
      readOnly: false, //是否只读
      options: {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        showPrintMargin: false,
        fontSize: 13
      }
    });
    
    //form
     const dataForm = ref({
      apiResFailExample: ''
    });
    //init
    const initFail = (editor: any) => {
     
    }
     // 返回值
    return {
       aceConfig,dataForm, initFail
    }
  }
    
    
})
</script>


文章作者: 苏叶新城
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 苏叶新城 !
  目录