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-editor
v-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', //解析json
theme: 'chrome', //主题
readOnly: false, //是否只读
options: {
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
tabSize: 2,
showPrintMargin: false,
fontSize: 13
}
});
//form
const dataForm = reactive({
Example: {
abc:'123',
def:'345',
ghi:{
abc:'123',
def:'345',
},
jkl:[
{
abc:'123',
def:'345',
},{
abc:'123',
def:'345',
}
]
},
textareashow:''
});
//init
const initFail = () => {
dataForm.textareashow = JSON.stringify(dataForm.Example,null,2)
};
// 返回值
return {
aceConfig,dataForm, initFail
}
}
})
</script>
- 结果展示
- 若报错如图
解决方法