herramienta de conversión de datos json-js

Conversión de datos JSON

complemento js:
https://github.com/josdejong/jsoneditor

Usar en vue:
1. Descargar

npm install jsoneditor

auditLog.vue:
escriba un div con el id "jsoneditor" en vue, y el componente se mostrará en este div

<div id="jsoneditor" style="width: 50%; height: 500px"></div>

auditLog.js:
Escribí detailDialog en la ventana emergente, y visible es abrir la ventana emergente, que se puede ignorar.Primero
, importe el js y el css del componente y
busque el div nuevo llamado jsoneditor a través del documento. getElementById Ponga los datos en
un objeto JSONEditor initialJson y finalmente edite el editor.

//详情弹窗
let visible = ref(false)
const detailDialog = () => {
    
    
    visible.value = true
    setTimeout(() => {
    
    
        let JSONEditor = require("jsoneditor/dist/jsoneditor.js")
        require("jsoneditor/dist/jsoneditor.min.css")
        console.log(JSONEditor)
        const container = document.getElementById("jsoneditor")
        const options = {
    
    }
        const editor = new JSONEditor(container, options)

        // set json
        const initialJson = {
    
    
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {
    
    
                "a": "b",
                "c": "d"
            },
            "String": "Hello World"
        }
        editor.set(initialJson)

        // get json
        const updatedJson = editor.get()
    }, 300)
}