{"id":15024782,"url":"https://github.com/liudding/json-vuer","last_synced_at":"2025-04-12T12:34:11.296Z","repository":{"id":41587211,"uuid":"310579847","full_name":"liudding/json-vuer","owner":"liudding","description":"a json viewer and editor for vue","archived":false,"fork":false,"pushed_at":"2022-12-13T18:42:09.000Z","size":1377,"stargazers_count":6,"open_issues_count":22,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T07:11:31.992Z","etag":null,"topics":["component","json","json-viewer","json-vuer","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://liudding.github.io/json-vuer","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liudding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-06T11:33:37.000Z","updated_at":"2024-03-28T10:59:10.000Z","dependencies_parsed_at":"2023-01-28T14:18:13.804Z","dependency_job_id":null,"html_url":"https://github.com/liudding/json-vuer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liudding%2Fjson-vuer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liudding%2Fjson-vuer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liudding%2Fjson-vuer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liudding%2Fjson-vuer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liudding","download_url":"https://codeload.github.com/liudding/json-vuer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248566805,"owners_count":21125728,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","json","json-viewer","json-vuer","vue","vuejs"],"created_at":"2024-09-24T20:00:54.871Z","updated_at":"2025-04-12T12:34:11.278Z","avatar_url":"https://github.com/liudding.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# json-vuer\n\nvue 的 JSON 查看和编辑器组件\n\nA json viewer and editor for vue\n\n\n\n[English](./README_en.md)\n\n\n\n![demonstration](./preview.png)\n\n\n- [json-vuer](#json-vuer)\n  - [功能特性](#功能特性)\n  - [安装说明](#安装说明)\n  - [属性参数](#属性参数)\n  - [个性主题](#个性主题)\n\n\n\n## 功能特性\n\n* 节点可展开/折叠\n* key 可按字母排序\n* JSON 编辑\n* 可以展示 array 和 object 的 size\n* 支持可自定义主题样式\n* 可复制到粘贴板\n\n\n## 安装说明\n\n使用 npm:\n```shell\nnpm install json-vuer --save\n```\n\n使用 yarn:\n```shell\nyarn add json-vuer\n```\n\n然后在 js 代码里，添加:\n```javascript\nimport JsonVuer from \"json-vuer\"\nVue.use(JsonVuer)\n```\n\n最后在模版中使用\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cjson-vuer :value=\"json\" \n                   :indentWidth=\"4\" \n                   :showObjectSize=\"true\" \n                   :showDataTypes=\"true\" \n                   :copyable=\"true\"/\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\n\n## 属性参数\n\n| Name           | Type                    | Default | Description                                                  |\n| -------------- | ----------------------- | ------- | ------------------------------------------------------------ |\n| value          | JSON                    | null    | 可以是任何有效的 json： object, array, string 等等       |\n| v-model        | JSON                    |         |                                                              |\n| name           | string \\| false \\| null | empty   | 根节点的名称. 可为 null/false/空字符串 |\n| indentWidth    | integer                 | 4       | 缩进       |\n| showObjectSize | boolean                 | true    | 是否显示 object/array 的大小                   |\n| objectSizeName | string                  | items   | “size” 显示的名称                                      |\n| showArrayIndex | boolean                 | true    | 是否展示 array 的 index                             |\n| showDataTypes  | boolean                 | true    | 是否展示数据类型                              |\n| showComma      | boolean                 | true    | 是否显示逗号                                  |\n| theme          | string                  | default | 内置的主题有: \"default\", \"night\", \"iron-man\", \"greenscreen\"。你可以完全自定义主题样式 [参看](#个性主题) . |\n| iconStyle      | string                  | circle  | 折叠/展开的图标. 可以是：\"circle\", triangle\", \"square\", \"chevron\". |\n| copyable       | boolean                 | true    | 设置是否可以复制      |\n| addable        | boolean                 | false   | 设置是否可以添加节点     |\n| editable       | boolean                 | false   | 设置是否可以编辑 |\n| removable      | boolean                 | false   | 设置是否可以删除         |\n| sort           | boolean                 | false   | 设置是否对 key 排序                              |\n\n\n\n\n## 个性主题\n\n只需两步，就可以自定义一个主题\n\n1. 按照如下模版自定义 **SCSS**\n2. 将 `theme=\"my-theme\"` 添加到 `JsonVuer` 组件\n\n```scss\n.json-vuer.my-theme { // 自定你的主题名称\n    background-color: #fff;\n    \n    .json-name {\n        color: #000;\n        \u0026.array-index { color: #0000FF; }\n    }\n\n    .json-value { // 设置不同类型 value 的显示样式\n        \u0026__object {\n            margin-left: 4px;\n            .fold-line { border-left: 1px dotted #aaa; }\n        }\n\n        \u0026__string { color: #FF0000; }\n        \u0026__boolean { color: #0000FF; }\n      \n        \u0026__integer,\n        \u0026__float { color: rgb(47, 100, 71);}\n      \n        \u0026__null,\n        \u0026__undefined,\n        \u0026__nan {\n            box-sizing: border-box;\n            padding: 0 4px;\n            border-radius: 4px;\n            color: #0000FF;\n            background-color: #0000;\n            font-size: 11px;\n        }\n    }\n\n    .json-braces { // 设置“括号”的显示样式\n        \u0026__start {}\n        \u0026__end {}\n        \u0026__object {}\n        \u0026__array {}\n    }\n\n  \t.json-comma,\n    .json-quotes { color: #000; } // 设置逗号、引号样式\n\n    .json-colon { // 设置冒号样式\n        margin: 0 4px;\n        color: #000;\n        font-weight: bold;\n    }\n\n    .json-data-type-label { // 设置数据类型标签样式\n        color: #aaa;\n        margin-right: 8px;\n    }\n\n    .json-toggle { // 设置“折叠/展开” 样式\n        padding: 0 8px 0 0;\n        color: #000;\n        font-size: 13px;\n\n        \u0026__collapsed {}\n\t    \u0026__expanded {}\n    }\n\n    .json-ellipsis { // 设置省略号样式\n        color: #000;\n        font-weight: bold;\n        padding: 0 5px;\n    }\n\n    .json-object-size { // 设置 object/array size 显示标签的样式\n        color: #aaa;\n        font-size: 12px;\n        margin-left: 8px;\n    }\n\n    .json-node-toolbar { // 设置节点工具栏样式\n        margin-left: 4px;\n        color: #000;\n        font-size: 14px;\n    }\n}\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliudding%2Fjson-vuer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliudding%2Fjson-vuer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliudding%2Fjson-vuer/lists"}