@alenaksu/json-viewer

在树视图中可视化 JSON 数据的 Web 组件

• 安装
  • 从CDN
  • 国家预防机制
• 使用量
  • 属性
  • 属性
  • 方法
  • CSS 组件
  • CSS 自定义属性
  • 基本用途
  • 动态装入 JSON
  • 基本互动
  • 自定义渲染器
• 演示

安装

从CDN

软件包包含一个捆绑版本的组件,其中也包括Lit库. 如果您想要使用 CDN 导入软件包, 它可以有所帮助 .

<script src="https://unpkg.com/@alenaksu/[email protected]/dist/json-viewer.bundle.js"></script>

国家预防机制

通过国家预防机制安装组件:

npm i @alenaksu/json-viewer

将软件包导入您的工程, 这样组件将自动在自定义元素注册簿中定义, 并带有默认标签名称 json-viewer。 。 。 .

import '@alenaksu/json-viewer';

如果您想要扩展组件,或者只需要在使用不同标签名称的被范围注册中使用,那么可以从包中导入组件类:

import { JsonViewer } '@alenaksu/json-viewer/JsonViewer.js';

class MyJsonViewer extends JsonViewer {
    ...
}

customElements.define('my-json-viewer', MyJsonViewer);

使用量

<json-viewer></json-viewer>

属性

• data - JSON 对象的字符串表示来装入

属性

• data - 获取/设置 JSON 对象

方法

• filter (regexOrPath: RegExp|string) => void QQ 只维护符合给定标准的节点
• resetFilter () => void 清除过滤器
• expand (regexOrPath: RegExp|string) => void QQ 扩展所有符合指定标准的节点
• expandAll () => void 别名 expand('**')
• collapse (regexOrPath: RegExp|string) => void QQ 折叠所有符合指定标准的节点
• collapseAll () => void 别名 collapse('**')
• search (regexOrPath: RegExp|string) => Iterator 返回和延时器,可以通过所有匹配的节点。 它将页面滚动到节点并突出它.

CSS 组件

• object - 对象包装元素.
• property - 财产的包装元素.
• key - 财产的关键要素.
• primitive - 原始价值.
• primitive--string - 原始是绳子时应用.
• primitive--number - 原始是数字时应用.
• primitive--boolean - 当原始的是一个布尔.
• primitive--null - 当原始物是无效时应用.
• preview - 属性的值预览 .
• highlight - 突出的价值.

CSS 自定义属性

组件的外观可以通过更改 CSS 自定义属性来修改

json-viewer {
    /* Background, font and indentation */
    --background-color: #2a2f3a;
    --color: #f8f8f2;
    --font-family: Nimbus Mono PS, Courier New, monospace;
    --font-size: 1rem;
    --line-height: 1.2rem;
    --indent-size: 0.5em;
    --indentguide-size: 1px;
    --indentguide-style: solid;
    --indentguide-color: #333;
    --indentguide-color-active: #666;
    --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);
    --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);
    --outline-color: #e0e4e5;
    --outline-width: 1px;
    --outline-style: dotted;

    /* Types colors */
    --string-color: #a3eea0;
    --number-color: #d19a66;
    --boolean-color: #4ba7ef;
    --null-color: #df9cf3;
    --property-color: #6fb3d2;

    /* Collapsed node preview */
    --preview-color: #deae8f;

    /* Search highlight color */
    --highlight-color:  #c92a2a;
}

基本用途

把JSON放进元素

<json-viewer>
    { "quiz": { "sport": { "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls",
    "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" } }, "maths": { "q1": {
    "question": "5 + 7 = ?", "options": [ "10", "11", "12", "13" ], "answer": "12" }, "q2": { "question": "12 - 8 = ?",
    "options": [ "1", "2", "3", "4" ], "answer": "4" } } } }
</json-viewer>

动态装入 JSON

<json-viewer id="json"></json-viewer>

<script>
    document.querySelector('#json').data = { prop1: true, prop2: 'test' };
</script>

基本互动

const viewer = document.querySelector('#json');

// Expand/collapse/filter
viewer.expand('**.name');
viewer.collapse(/name/);
viewer.filter('test.*.name');

// Search
const searchIterator = viewer.search('value');
// Scrolls to the node and highlight the value
searchIterator.next();

自定义渲染器

这是一个实验性特征,它可能会在未来改变

数值的渲染可以通过定义静态方法定制 customRenderer 在自定义元素类中. 该函数接收了节点的值和路径, 它应该返回 HTML 节点或 Lit 的 TemplateResult 对象.

import { JsonViewer } from '@alenaksu/json-viewer/JsonViewer.js';

customElements.define(
    'json-viewer',
    class extends JsonViewer {
        static styles = [
            JsonViewer.styles,
            css`
                a {
                    color: white;
                    text-decoration: underline;
                }
            `
        ];

        static customRenderer(value, path) {
            if (typeof value === 'string') {
                if (URL.canParse(value)) {
                    return html`<a href="${value}" target="_blank">${value}</a>`;
                } else if (Date.parse(value)) {
                    return new Date(value).toLocaleString();
                }
            } else if (typeof value === 'number') {
                return value.toFixed(2);
            }

            return super.customRenderer(value);
        }
    }
);

演示

演示还可以在本地运行

npm run start