vue-json-pretty-sign

本项目基于 [email protected] 版本开发，主要实现标记键值与展示标记键值注释的功能。 注意如果父级为标记键值,则其子级将全部被标记.

一个将 JSON 字符串渲染成树形结构的 Vue2.x 组件

• 基础功能: JSON 的美化
• 高级功能: JSON 数据对应层级数据的获取

添加参数

| 属性 | 级别 | 说明 | 类型 | 默认值 | | ----------------- | ---- | -------------------------- | ------- | -------- | | showSignComment | 基础 | 是否标记的键值注释 | boolean | true | | signKeys | 高级 | 标记的键值对 | Object | null | | addKeys | 基础 | 额外标记 Json 不存在键值对 | Object | null | | showCopy | 基础 | 显示复制按钮 | boolean | true | | copyTitle | 基础 | 复制按钮文字 | String | "复制" | | copyCompleteTitle | 高级 | 复制完成按钮文字 | String | "已复制" |

链接

• 当前项目 demo： Demo
• 基于 leezng/vue-json-pretty： Github

安装

请下载后打包编译

快速开始

<template>
  <div>
    ...
    <vue-json-pretty-sign
      :path="'res'"
      :data="{ key: 'value' }"
      @click="handleClick"
    >
    </vue-json-pretty-sign>
  </div>
</template>

// 更多用法请见demo页面
import VueJsonPrettySign from "vue-json-pretty-sign";

export default {
  components: {
    VueJsonPrettySign
  }
};

Props

• 若仅使用基础功能(JSON 美化)，只需关注功能级别为 基础 的属性。
• 若使用高级功能(选择数据)，你可以同时使用 基础 与 高级 的属性。

| 属性 | 级别 | 说明 | 类型 | 默认值 | | ---------------------- | ---- | ----------------------------------------- | --------------------------------------------- | -------- | | data | 基础 | 待美化的源数据，注意不是 JSON 字符串 | JSON 对象 | - | | deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity | | showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false | | showLine | 基础 | 是否显示缩紧标识线 | boolean | true | | showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true | | showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true | | showSignComment | 基础 | 是否展示标记的键值注释 | boolean | true | | signKeys | 高级 | 标记的键值对 | Object | null | | highlightMouseoverNode | 基础 | 是否在 mouseover 的时候高亮 | boolean | false | | v-model | 高级 | 双向绑定选中的数据层级 | string, array | -, [] | | path | 高级 | 定义最顶层数据层级 | string | '' | | pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] | | pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - | | selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: -, multiple, single | - | | showSelectController | 高级 | 是否展示选择控制器 | boolean | false | | selectOnClickNode | 高级 | 是否在点击节点的时候触发 v-model 双向绑定 | boolean | true | | highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true | | customValueFormatter | 高级 | 可以进行值的自定义渲染 | Function(data, key, parent, defaultFormatted) | - |

Events

| 事件名 | 说明 | 回调参数 | | ------ | -------------------------------------- | ---------------- | | click | 点击某一个数据层级时触发的事件 | (path, data) | | change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) |