vue3.0中使用JSON编译器的一般步骤:
1.安装JSON编辑器,引入第三方插件
npm install json-editor-vue3
2.在项目中引入该插件
import JsonEditorVue from 'json-editor-vue3' // 导入模块
components: { JsonEditorVue}, // 注册组件
3.完整代码
<template>
<div @click.left="changePosition">
<json-editor-vue
v-model="isJson"
class="editor"
:show-btns="true"
:expandedOnStart="false"
:current-mode="currentMode"
:style="{ height: '500px', overflowX: 'hidden', overflowY: 'auto' }"
/>
</div>
</template>
<script>
// 导入模块
import JsonEditorVue from 'json-editor-vue3';
export default defineComponent({
name: 'EnterpriseList',
// 注册组件
components: {
JsonEditorVue,
},
setup() {
// 这是拿到的数据
const configValue=
“{username:'admin_user',encrypt:'V99HRLkRiWgL4cBgVPOYqF72PKKKF
L7z0Ut8vvDoM6zkf9xwcSI4hcHgj3QmPIWmEg6OjRX5vuToWRMXbZgJUtBp3hwYW
GOW3n4HatHiQCjsarMpxbo1kXt1zsvD/KUjtWTG1B0GfuQcEzmVAMETTIPlooP
srnGMSH4FHhstAA=',}”;
// 转化格式 并展示
let isJson = JSON.parse(configValue);
//转化成后端所需要的格式
let isString = JSON.stringify(configValue);
const state = reactive({
currentMode: 'code',
});
const changePosition = () => {
console.log(11111);
};
return {
...toRefs(state),
changePosition,
isJson,
};
},
});
</script>
<style lang="scss" scope>
.jsoneditor {
border: none;
}
.jsoneditor-menu {
display: none;
}
</style>
4.JSON 编译器各参数详情:
参数 类型 描述 默认 modelValue Object 要编辑的json值 options Object jsoneditor的options,参考configuration-options currentMode String 当前编辑模式 code modeList Array 可选的编辑模式列表 [“tree”, “code”, “form”, “text”, “view”] language Array 语言 en
Name Description update:modelValue json 更新 change json 更新 textSelectionChange 参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同 selectionChange 参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同 focus 参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同 blur 参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同 colorPicker 参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同