vue3.0中前端怎么使用 JSON编译器_vue3 json编辑器

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对应参数，参数有重写，第一个参数为编辑器的实例，后续参数与官方参数相同