diff --git a/README_CN.md b/README_CN.md new file mode 100644 index 0000000..a17e62b --- /dev/null +++ b/README_CN.md @@ -0,0 +1,204 @@ +# vue-json-viewer + +简单易用的json内容展示组件,支持vue@2.0+,支持SSR,组件支持增量渲染即使大文件json也可以快速渲染。 + +[![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer) +[![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer) + +- [安装](#安装) +- [示例](#示例) +- [选项](#选项) +- [主题](#主题) + +## 安装 +使用 npm: +``` +$ npm install vue-json-viewer --save +``` + +使用 yarn: +``` +$ yarn add vue-json-viewer +``` + +## 示例 + +``` html + + +
+ + +``` + +``` js +import Vue from 'vue' +import JsonViewer from 'vue-json-viewer' + +// Import JsonViewer as a Vue.js plugin +Vue.use(JsonViewer) +// or +// components: {JsonViewer} + + +new Vue({ + el: '#app', + data() { + return { + jsonData: { + total: 25, + limit: 10, + skip: 0, + links: { + previous: undefined, + next: function () {}, + }, + data: [ + { + id: '5968fcad629fa84ab65a5247', + firstname: 'Ada', + lastname: 'Lovelace', + awards: null, + known: [ + 'mathematics', + 'computing' + ], + position: { + lat: 44.563836, + lng: 6.495139 + }, + description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, + chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, + the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, + and published the first algorithm intended to be carried out by such a machine. + As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`, + bornAt: '1815-12-10T00:00:00.000Z', + diedAt: '1852-11-27T00:00:00.000Z' + }, { + id: '5968fcad629fa84ab65a5246', + firstname: 'Grace', + lastname: 'Hopper', + awards: [ + 'Defense Distinguished Service Medal', + 'Legion of Merit', + 'Meritorious Service Medal', + 'American Campaign Medal', + 'World War II Victory Medal', + 'National Defense Service Medal', + 'Armed Forces Reserve Medal', + 'Naval Reserve Medal', + 'Presidential Medal of Freedom' + ], + known: null, + position: { + lat: 43.614624, + lng: 3.879995 + }, + description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992) + was an American computer scientist and United States Navy rear admiral. + One of the first programmers of the Harvard Mark I computer, + she was a pioneer of computer programming who invented one of the first compiler related tools. + She popularized the idea of machine-independent programming languages, which led to the development of COBOL, + an early high-level programming language still in use today.`, + bornAt: '1815-12-10T00:00:00.000Z', + diedAt: '1852-11-27T00:00:00.000Z' + } + ] + } + } + } +}) +``` +### 支持SSR +``` js +import JsonViewer from 'vue-json-viewer/ssr' + +// Import JsonViewer as a Vue.js plugin +Vue.use(JsonViewer) +// or +// components: {JsonViewer} +``` +and + +``` js +import 'vue-json-viewer/style.css' +``` + + +### 图片预览 +![preview](./example/preview.png) + + +## 选项 + +| 属性 | 描述 | 默认值 | +| ----------- |:------------- | ----------- | +| `value` | json对象的值,可以使用v-model,支持响应式 | **必填** | +| `expand-depth` | 默认展开的层级 | `1` | +| `copyable` | 展示复制按钮 | `false` | +| `sort` | 按照key排序展示 | `false` | +| `boxed` | 为组件添加一个盒样式 | `false` | +| `theme` | 添加一个自定义的样式class用作主题 | `jv-light` | + +## 主题 + +有两个办法创建自定义主题, (e.g. `my-awesome-json-theme`): +1. 添加 `theme="my-awesome-json-theme"` JsonViewer的组件属性 +2. 复制粘贴下面的模板并且根据自定义的theme名称做对应调整: + +``` scss +// values are default one from jv-light template +.my-awesome-json-theme { + background: #fff; + white-space: nowrap; + color: #525252; + font-size: 14px; + font-family: Consolas, Menlo, Courier, monospace; + + .jv-ellipsis { + color: #999; + background-color: #eee; + display: inline-block; + line-height: 0.9; + font-size: 0.9em; + padding: 0px 4px 2px 4px; + border-radius: 3px; + vertical-align: 2px; + cursor: pointer; + user-select: none; + } + .jv-button { color: #49b3ff } + .jv-key { color: #111111 } + .jv-item { + &.jv-array { color: #111111 } + &.jv-boolean { color: #fc1e70 } + &.jv-function { color: #067bca } + &.jv-number { color: #fc1e70 } + &.jv-object { color: #111111 } + &.jv-undefined { color: #e08331 } + &.jv-string { + color: #42b983; + word-break: break-word; + white-space: normal; + } + } + .jv-code { + .jv-toggle { + &:before { + padding: 0px 2px; + border-radius: 2px; + } + &:hover { + &:before { + background: #eee; + } + } + } + } +} +```