Vue3 JSON编辑器

最新推荐文章于 2024-08-21 08:36:40 发布

苏叶新城

最新推荐文章于 2024-08-21 08:36:40 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签： json vue

本文链接：https://blog.csdn.net/haha_201510/article/details/120424688

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

安装依赖

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>