vue3-json-viewer-plus

中文版

Simple and easy-to-use json content display component suitable for vue3 and vite. When developing with vue3+vite, I found that I needed to use the display json data component, and found that vue-json-viewer can only be compatible with vue2, so it took an hour to rewrite the adaptation of vue3. Original author: github

Install

Requires clipboard

$ npm install clipboard --save

Then install vue3-json-viewer-plus

$ npm install vue3-json-viewer-plus --save

RecentUpdate

• dark theme support
• Add click event for keyNode
• Support RegExp types

Doc

document

Usage

main.js

1import { createApp } from "vue";
2import App from "./App.vue";
3import JsonViewer from "vue3-json-viewer-plus";
4// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer-plus/dist/index.css"
5import "vue3-json-viewer-plus/dist/index.css";
6const app = createApp(App);
7app.use(JsonViewer);
8app.mount("#app");

App.vue

1<template>
2  <div class="box">
3    <h4>普通</h4>
4    <JsonViewer :value="jsonData" copyable boxed sort theme="light"  @onKeyClick="keyClick"/>
5    <h4>暗黑</h4>
6    <JsonViewer :value="jsonData" copyable boxed sort theme="dark"  @onKeyClick="keyClick"/>
7  </div>
8</template>
9
10<script setup>
11import {JsonViewer} from "vue3-json-viewer-plus"
12// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer-plus/dist/index.css"
13import "vue3-json-viewer-plus/dist/index.css";
14import { reactive, ref } from "vue";
15let obj = {
16  name: "qiu",//字符串
17  age: 18,//数组
18  isMan:false,//布尔值
19  date:new Date(),
20  fn:()=>{},
21  arr:[1,2,5],
22  reg:/ab+c/i
23};
24const jsonData = reactive(obj);
25const keyClick = (keyName)=>{
26  console.log(keyName,"被点击了")
27}
28</script>
29
30<style>
31.box{
32  margin-top: 1rem;
33}
34</style>
35
36

explain In the basic modification section of vue3-json-viewer

• Remove the front and back quotes when json-box displays strings