vue3.0使用高亮json，并自定义样式

1.安全依赖
安装成功后版本是^2.2.2

npm install vue3-json-viewer --save

2.在需要格式化json的页面引用
formData.event是需要展示的json内容

// json格式化
import { JsonViewer } from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'

<JsonViewer
    :value="formData.event"
    :expand-depth="5"
    copyable
    sort
    class="my-awesome-json-theme"
    theme="my-awesome-json-theme"
/>

效果如图：

3.自定义样式
自定义样式在组件添加上class="my-awesome-json-theme" css部分样式均可修改

// 自定义高亮json样式
.my-awesome-json-theme {
    background: #fff;
    border: 1px solid #ebeef5;
    white-space: nowrap;
    color: #525252;
    font-size: 14px;
    font-family: Consolas, Menlo, Courier, monosp