├── .babelrc
├── .gitignore
├── README.md
├── dist
    └── vue-json-edit.js
├── example
    ├── App.vue
    ├── dist
    │   ├── index.html
    │   └── main_2660daf9816ab5cf481c.js
    ├── index.html
    └── main.js
├── package-lock.json
├── package.json
├── src
    ├── ArrayView.vue
    ├── ItemAddForm.vue
    ├── JsonEditor.vue
    ├── JsonView.vue
    ├── assets
    │   ├── .DS_Store
    │   ├── font
    │   │   ├── demo.css
    │   │   ├── demo_index.html
    │   │   ├── fontello.eot
    │   │   ├── fontello.svg
    │   │   ├── fontello.ttf
    │   │   ├── fontello.woff
    │   │   ├── fontello.woff2
    │   │   ├── iconfont.css
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.js
    │   │   ├── iconfont.json
    │   │   ├── iconfont.svg
    │   │   ├── iconfont.ttf
    │   │   ├── iconfont.woff
    │   │   └── iconfont.woff2
    │   └── styles
    │   │   ├── common.less
    │   │   ├── fontello.less
    │   │   └── pure
    │   │       ├── base-min.css
    │   │       ├── base-min.less
    │   │       ├── buttons-min.css
    │   │       ├── buttons-min.less
    │   │       ├── forms-min.css
    │   │       └── forms-min.less
    └── index.js
├── webpack.base.js
├── webpack.build.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "stage-0"],
 3 |   "plugins": [[
 4 |     "transform-runtime",
 5 |     {
 6 |       "helpers": false,
 7 |       "polyfill": false,
 8 |       "regenerator": true,
 9 |       "moduleName": "babel-runtime"
10 |     }
11 |   ]]
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | node_modules
3 | 
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-Json-Edit
 2 | 
 3 | > Visual JSON Editor built as an vue component. Provides a basic GUI
 4 | 
 5 | 
 6 | </br>
 7 | 
 8 | 
 9 | ## **[DEMO](http://jinkin1995.github.io/vue-json-edit)**
10 | 
11 | </br>
12 | 
13 | 
14 | ## Getting Started
15 | ```
16 | npm install vue-json-edit --save
17 | ```
18 | 
19 | </br>
20 | 
21 | 
22 | ## Usage
23 | 
24 | ``` javascript
25 | //import it in your project At your entry point
26 | 
27 | import Vue from 'vue'
28 | import JsonEditor from 'vue-json-edit'
29 |   
30 | Vue.use(JsonEditor)
31 | ```
32 | ### Props
33 | 
34 | * objData: json data
35 | * options
36 |     * confirmText: strings of the confirm button
37 |     * cancelText: strings of the cancel button
38 | 
39 | 
40 | </br>
41 | 
42 | ## Example
43 | Single file component
44 | ``` html
45 | 
46 | <template>
47 |     <JsonEditor
48 |         :options="{
49 |             confirmText: 'confirm',
50 |             cancelText: 'cancel',
51 |         }"
52 |         :objData="jsonData" 
53 |         v-model="jsonData" >
54 |     </JsonEditor>
55 | </template>
56 | <script>
57 | export default {
58 |     ...
59 |     data: function() {
60 |         return {
61 |             jsonData: {
62 |                 name: 'mike',
63 |                 age: 23,
64 |                 phone: '18552129932',
65 |                 address: ['AAA C1', 'BBB C2']
66 |             }
67 |         }
68 |     }
69 | }
70 | </script> 
71 | ```
72 | 
73 | </br>
74 | 
75 | 
76 | ## ..
77 | 
78 | Aplipay: </br>
79 | <img src="https://s3.bmp.ovh/imgs/2022/01/d5e26a068a6b7b03.png" width="300px">
80 | 
81 | 
82 | USDT: </br>
83 | <img src="https://s3.bmp.ovh/imgs/2022/01/8739eedae8a9a39d.jpeg" width="300px">
84 | 
85 | 
86 | 
87 | 
88 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="j-w">
  3 | 		<h1 class="t">Vue-Json-Edit</h1>
  4 | 		<div class="editor-w clearfix">
  5 | 			<div class="w-2">
  6 | 				<div class="editor">
  7 | 					<JsonEditor
  8 | 						:options="{
  9 | 							confirmText: 'confirm',
 10 | 							cancelText: 'cancel',
 11 | 						}"
 12 | 						:objData="jsonData" 
 13 | 						v-model="jsonData" ></JsonEditor>
 14 | 				</div>
 15 | 			</div>
 16 | 			<div class="w-2">
 17 | 				<div class="code-pre">
 18 | 					<div slot="content">
 19 | 						<pre>
 20 | 							<code class="json" id="res_code"></code>
 21 | 						</pre>
 22 | 					</div>
 23 | 				</div>
 24 | 			</div>
 25 | 		</div>
 26 | 	</div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import hljs from 'highlight.js'
 31 | 
 32 | export default {
 33 | 	name: 'app',
 34 | 	data: function() {
 35 | 		return {
 36 | 			jsonData: {
 37 | 				name: 'may',
 38 | 				age: null,
 39 | 				address: ['Panyu Shiqiao on Canton', 'Tianhe', {
 40 | 					city: 'forida meta 11'
 41 | 				}],
 42 | 				others: {
 43 | 					id: 1246,
 44 | 					joinTime: '2017-08-20. 10:20',
 45 | 					description: 'another'
 46 | 				}
 47 | 			}
 48 | 		}
 49 | 	},
 50 | 	watch: {
 51 | 		'jsonData': function () {
 52 | 			let c = this.formatJson(JSON.stringify(this.jsonData))
 53 | 			this.drawResCode(c)
 54 | 		}
 55 | 	},
 56 | 	methods: {
 57 | 		//JSON format print
 58 | 		formatJson: function(txt, compress /*是否为压缩模式*/) {
 59 | 			/* 格式化JSON源码(对象转换为JSON文本) */
 60 | 			var indentChar = "  ";
 61 | 			if (/^\s*$/.test(txt)) {
 62 | 				console.error("数据为空,无法格式化! ");
 63 | 				return;
 64 | 			}
 65 | 			try {
 66 | 				var data = eval("(" + txt + ")");
 67 | 			} catch (e) {
 68 | 				throw ("数据源语法错误,格式化失败! 错误信息: " + e.description, "err");
 69 | 				return;
 70 | 			}
 71 | 			var draw = [],
 72 | 				last = false,
 73 | 				This = this,
 74 | 				line = compress ? "" : "\n",
 75 | 				nodeCount = 0,
 76 | 				maxDepth = 0;
 77 | 
 78 | 			var notify = function(name, value, isLast, indent /*缩进*/, formObj) {
 79 | 				nodeCount++; /*节点计数*/
 80 | 				for (var i = 0, tab = ""; i < indent; i++) tab += indentChar; /* 缩进HTML */
 81 | 				tab = compress ? "" : tab; /*压缩模式忽略缩进*/
 82 | 				maxDepth = ++indent; /*缩进递增并记录*/
 83 | 				if (value && value.constructor == Array) {
 84 | 					/*处理数组*/
 85 | 					draw.push(
 86 | 						tab + (formObj ? '"' + name + '":' : "") + "[" + line
 87 | 					); /*缩进'[' 然后换行*/
 88 | 					for (var i = 0; i < value.length; i++)
 89 | 						notify(i, value[i], i == value.length - 1, indent, false);
 90 | 					draw.push(
 91 | 						tab + "]" + (isLast ? line : "," + line)
 92 | 					); /*缩进']'换行,若非尾元素则添加逗号*/
 93 | 				} else if (value && typeof value == "object") {
 94 | 					/*处理对象*/
 95 | 					draw.push(
 96 | 						tab + (formObj ? '"' + name + '":' : "") + "{" + line
 97 | 					); /*缩进'{' 然后换行*/
 98 | 					var len = 0,
 99 | 						i = 0;
100 | 					for (var key in value) len++;
101 | 					for (var key in value) notify(key, value[key], ++i == len, indent, true);
102 | 					draw.push(
103 | 						tab + "}" + (isLast ? line : "," + line)
104 | 					); /*缩进'}'换行,若非尾元素则添加逗号*/
105 | 				} else {
106 | 					if (typeof value == "string") value = '"' + value + '"';
107 | 					draw.push(
108 | 						tab +
109 | 						(formObj ? '"' + name + '":' : "") +
110 | 						value +
111 | 						(isLast ? "" : ",") +
112 | 						line
113 | 					);
114 | 				}
115 | 			};
116 | 			var isLast = true,
117 | 				indent = 0;
118 | 			notify("", data, isLast, indent, false);
119 | 			return draw.join("");
120 | 		},
121 | 
122 | 		//绘制res body
123 | 		drawResCode: function (content) {
124 | 			var target = document.getElementById('res_code');
125 | 			target.textContent = content
126 | 			hljs.highlightBlock(target)
127 | 		},
128 | 	},
129 | 	mounted: function() {
130 | 		let c = this.formatJson(JSON.stringify(this.jsonData))
131 | 		this.drawResCode(c)
132 | 	}
133 | }
134 | </script>
135 | 
136 | <style>
137 | @import url('../node_modules/highlight.js/styles/github.css');
138 | 
139 | </style>
140 | 
141 | 
142 | 


--------------------------------------------------------------------------------
/example/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue-Json-Edit</title>
 6 |     <style>
 7 |       body {
 8 |         font-size: 14px;
 9 |         font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |         -webkit-font-smoothing: antialiased;
11 |         -moz-osx-font-smoothing: grayscale;
12 |         color: #2c3e50;
13 |       }
14 |       
15 |       .clearfix {
16 |         *zoom: 1;
17 |       }
18 |       
19 |       .clearfix:before,
20 |       .clearfix:after {
21 |         content: '';
22 |         display: table;
23 |       }
24 |       
25 |       .clearfix:after {
26 |         clear: both;
27 |       }
28 | 
29 |       .t {
30 |         text-align: center;
31 |         margin-top: 40px;
32 |         margin-bottom: 60px;
33 |       }
34 |       
35 |       .editor-w {
36 |         margin: 0 auto;
37 |         max-width: 1200px;
38 |         padding: 0 20px;
39 |       }
40 | 
41 |       .w-2 {
42 |         float: left;
43 |         width: 50%;
44 |       }
45 | 
46 |       .editor {
47 |         padding: 20px 60px;
48 |       }
49 | 
50 |     
51 |       </style>
52 |   </head>
53 |   <body>
54 |     <div id="app"></div>
55 |     <!-- built files will be auto injected -->
56 |  <script type="text/javascript" src="main_2660daf9816ab5cf481c.js"></script></body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue-Json-Edit</title>
 6 |     <style>
 7 |       body {
 8 |         font-size: 14px;
 9 |         font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |         -webkit-font-smoothing: antialiased;
11 |         -moz-osx-font-smoothing: grayscale;
12 |         color: #2c3e50;
13 |       }
14 |       
15 |       .clearfix {
16 |         *zoom: 1;
17 |       }
18 |       
19 |       .clearfix:before,
20 |       .clearfix:after {
21 |         content: '';
22 |         display: table;
23 |       }
24 |       
25 |       .clearfix:after {
26 |         clear: both;
27 |       }
28 | 
29 |       .t {
30 |         text-align: center;
31 |         margin-top: 40px;
32 |         margin-bottom: 60px;
33 |       }
34 |       
35 |       .editor-w {
36 |         margin: 0 auto;
37 |         max-width: 1200px;
38 |         padding: 0 20px;
39 |       }
40 | 
41 |       .w-2 {
42 |         float: left;
43 |         width: 50%;
44 |       }
45 | 
46 |       .editor {
47 |         padding: 20px 60px;
48 |       }
49 | 
50 |     
51 |       </style>
52 |   </head>
53 |   <body>
54 |     <div id="app"></div>
55 |     <!-- built files will be auto injected -->
56 |  </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import JsonEditor from '../src/index.js'
 3 | import App from './App.vue'
 4 | 
 5 | Vue.use(JsonEditor)
 6 | 
 7 | 
 8 | /* eslint-disable no-new */
 9 | new Vue({
10 |   el: '#app',
11 |   render: h => (h)(App)
12 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-json-edit",
 3 |   "version": "1.4.3",
 4 |   "description": "visual JSON editor built as an vue component",
 5 |   "author": "Jinkin1995 <jinkin1995@gmail.com>",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "json"
 9 |   ],
10 |   "main": "./src/index.js",
11 |   "module": "./dist/vue-json-edit.js",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/jinkin1995/vue-json-edit.git"
15 |   },
16 |   "homepage": "https://github.com/jinkin1995/vue-json-edit",
17 |   "bugs": {
18 |     "url": "https://github.com/jinkin1995/vue-json-edit/issues"
19 |   },
20 |   "license": "Apache 2",
21 |   "scripts": {
22 |     "dev": "webpack-dev-server --open --config webpack.config.js",
23 |     "example": "rm -rf ./example/dist/*.js && rm -rf ./example/dist/*.html && webpack --progress --config webpack.config.js",
24 |     "build": "webpack --progress --config webpack.build.js"
25 |   },
26 |   "devDependencies": {
27 |     "babel-core": "^6.26.3",
28 |     "babel-loader": "^7.1.5",
29 |     "babel-plugin-transform-runtime": "^6.23.0",
30 |     "babel-preset-es2015": "^6.24.1",
31 |     "babel-preset-stage-0": "^6.24.1",
32 |     "css-loader": "^2.1.0",
33 |     "html-webpack-plugin": "^3.2.0",
34 |     "less": "^3.9.0",
35 |     "less-loader": "^4.1.0",
36 |     "resolve-url-loader": "^3.0.1",
37 |     "style-loader": "^0.23.1",
38 |     "url-loader": "^1.1.2",
39 |     "vue-loader": "^15.7.0",
40 |     "vue-template-compiler": "^2.6.8",
41 |     "webpack": "^4.29.6",
42 |     "webpack-cli": "^3.3.11",
43 |     "webpack-dev-server": "^3.11.0"
44 |   },
45 |   "dependencies": {
46 |     "highlight.js": "^9.15.6",
47 |     "lodash.clonedeep": "^4.5.0",
48 |     "vue": "^2.6.8",
49 |     "vuedraggable": "^2.23.2"
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not ie <= 8"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/src/ArrayView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="block_content array">
  3 |     <ol class="array-ol">
  4 |       <draggable v-model="flowData" handle=".dragbar" @end="onDragEnd">
  5 |         <li
  6 |           v-for="(member, index) in flowData"
  7 |           :key="`${member.type}${index}`"
  8 |           :class="['array-item', {'hide-item': hideMyItem[index] == true}]"
  9 |         >
 10 |           <p v-if="member.type !== 'object' && member.type !== 'array'">
 11 |             <input
 12 |               type="text"
 13 |               v-model="member.remark"
 14 |               class="val-input"
 15 |               v-if="member.type === 'string'"
 16 |               placeholder="string"
 17 |             />
 18 |             <input
 19 |               type="number"
 20 |               v-model.number="member.remark"
 21 |               class="val-input"
 22 |               v-if="member.type == 'number'"
 23 |               placeholder="number"
 24 |               @input="numberInputChange(member)"
 25 |             />
 26 |             <select
 27 |               name="value"
 28 |               v-model="member.remark"
 29 |               class="val-input"
 30 |               v-if="member.type == 'boolean'"
 31 |             >
 32 |               <option :value="true">true</option>
 33 |               <option :value="false">false</option>
 34 |             </select>
 35 |           </p>
 36 |           <div v-else>
 37 |             <span :class="['json-key', 'json-desc']">
 38 |               {{member.type.toUpperCase()}}
 39 |               <i
 40 |                 class="collapse-down v-json-edit-icon-arrow_drop_down"
 41 |                 v-if="member.type == 'object' || member.type == 'array'"
 42 |                 @click="closeBlock(index, $event)"
 43 |               ></i>
 44 |               <i v-if="member.type == 'object'">{{'{' + member.childParams.length + '}'}}</i>
 45 |               <i v-if="member.type == 'array'">{{'[' + member.childParams.length + ']'}}</i>
 46 |             </span>
 47 | 
 48 |             <span class="json-val">
 49 |               <template v-if="member.type == 'array'">
 50 |                 <array-view :parsedData="member.childParams || []" v-model="member.childParams"></array-view>
 51 |               </template>
 52 | 
 53 |               <template v-if="member.type == 'object'">
 54 |                 <json-view :parsedData="member.childParams || {}" v-model="member.childParams"></json-view>
 55 |               </template>
 56 |             </span>
 57 |           </div>
 58 | 
 59 |           <div class="tools">
 60 |             <select v-model="member.type" class="tools-types" @change="itemTypeChange(member)">
 61 |               <option v-for="(item, index) in formats" :value="item" :key="index">{{item}}</option>
 62 |             </select>
 63 |             <i class="dragbar v-json-edit-icon-drag"></i>
 64 |             <i class="del-btn" @click="delItem(parsedData, member, index)">
 65 |               <i class="v-json-edit-icon-huishouzhan_huaban"></i>
 66 |             </i>
 67 |           </div>
 68 |         </li>
 69 |       </draggable>
 70 |     </ol>
 71 | 
 72 |     <item-add-form v-if="toAddItem" @confirm="newItem" @cancel="cancelNewItem" :needName="false"></item-add-form>
 73 | 
 74 |     <div class="block add-key" v-if="!toAddItem" @click="addItem">
 75 |       <i class="v-json-edit-icon-add"></i>
 76 |     </div>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | import ItemAddForm from "./ItemAddForm.vue";
 82 | 
 83 | export default {
 84 |   name: "ArrayView",
 85 |   props: ["parsedData"],
 86 |   data: function() {
 87 |     return {
 88 |       formats: ["string", "array", "object", "number", "boolean"],
 89 |       flowData: this.parsedData,
 90 |       toAddItem: false,
 91 |       hideMyItem: {}
 92 |     };
 93 |   },
 94 |   watch: {
 95 |     parsedData: {
 96 |       handler(newValue, oldValue) {
 97 |         this.flowData = this.parsedData || [];
 98 |       }
 99 |     }
100 |   },
101 |   components: {
102 |     "item-add-form": ItemAddForm,
103 |     "json-view": () => import("./JsonView.vue")
104 |   },
105 |   methods: {
106 |     delItem: function(parentDom, item, index) {
107 |       this.flowData.splice(index, 1);
108 |       if (this.hideMyItem[index]) this.hideMyItem[index] = false;
109 |       this.$emit("input", this.flowData);
110 |     },
111 | 
112 |     addItem: function() {
113 |       this.toAddItem = true;
114 |     },
115 | 
116 |     cancelNewItem: function() {
117 |       this.toAddItem = false;
118 |     },
119 | 
120 |     closeBlock: function(index, e) {
121 |       this.$set(this.hideMyItem, index, this.hideMyItem[index] ? false : true);
122 |     },
123 | 
124 |     newItem: function(obj) {
125 |       this.toAddItem = false;
126 | 
127 |       let oj = {
128 |         name: obj.key,
129 |         type: obj.type
130 |       };
131 |       if (obj.type == "array" || obj.type == "object") {
132 |         oj.childParams = obj.val;
133 |         oj.remark = null;
134 |       } else {
135 |         oj.childParams = null;
136 |         oj.remark = obj.val;
137 |       }
138 | 
139 |       this.flowData.push(oj);
140 |       this.$emit("input", this.flowData);
141 |       this.cancelNewItem();
142 |     },
143 | 
144 |     onDragEnd: function() {
145 |       this.$emit("input", this.flowData);
146 |     },
147 | 
148 |     itemTypeChange: function(item) {
149 |       if (item.type === "array" || item.type === "object") {
150 |         item.childParams = [];
151 |         item.remark = null;
152 |       }
153 |       if (item.type === "boolean") {
154 |         item.remark = true;
155 |       }
156 |       if (item.type === "string") {
157 |         item.remark = "";
158 |       }
159 |       if (item.type === "number") {
160 |         item.remark = 0;
161 |       }
162 |     },
163 | 
164 |     numberInputChange: function(item) {
165 |       if (!item.remark) item.remark = 0;
166 |     }
167 |   }
168 | };
169 | </script>
170 | 


--------------------------------------------------------------------------------
/src/ItemAddForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="add-form pure-form">
  3 |     <div class="f-input">
  4 |       <input 
  5 |         type="text" 
  6 |         v-model="keyName"
  7 |         v-if="needName"
  8 |         class="f-input-m" 
  9 |         placeholder="name">
 10 |       <select v-model="formatSelected" class="f-input-m">
 11 |         <option 
 12 |           v-for="(item, index) in formats"
 13 |           :value="item"
 14 |           :key="index">
 15 |           {{item}}
 16 |         </option>
 17 |       </select>
 18 |       <span class="f-input-m">
 19 |         <b>:</b>
 20 |       </span>
 21 | 
 22 |       <template v-if="formatSelected !='array' && formatSelected != 'object'">
 23 |         <input
 24 |           type="text"
 25 |           v-model="valName"
 26 |           class="f-input-m"
 27 |           placeholder="value"
 28 |           v-if="formatSelected == 'string'"
 29 |         >
 30 |         <input
 31 |           type="number"
 32 |           v-model="valName"
 33 |           class="f-input-m"
 34 |           placeholder="value"
 35 |           v-if="formatSelected == 'number'"
 36 |           @change="dealNumber"
 37 |         >
 38 |         <select
 39 |           name="value"
 40 |           v-model="valName"
 41 |           class="f-input-m"
 42 |           v-if="formatSelected == 'boolean'"
 43 |           @change="dealBoolean"
 44 |         >
 45 |           <option :value="true">true</option>
 46 |           <option :value="false">false</option>
 47 |         </select>
 48 |       </template>
 49 |     </div>
 50 | 
 51 |     <div class="f-btns">
 52 |       <button 
 53 |         class="pure-button f-confirm" 
 54 |         @click="confirm">
 55 |         {{ this.formBtnText.confirmText }}
 56 |       </button>
 57 |       <button 
 58 |         class="pure-button"
 59 |         @click="cancel">
 60 |         {{ this.formBtnText.cancelText }}
 61 |       </button>
 62 |     </div>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | export default {
 68 |   name: 'ItemAddForm',
 69 |   data () {
 70 |     return {
 71 |       formats: ['string', 'array', 'object', 'number', 'boolean'],
 72 |       formatSelected: 'string',
 73 |       //--
 74 |       keyName: '',
 75 |       valName: ''
 76 |     };
 77 |   },
 78 |   props: {
 79 |     needName: {
 80 |       default: true
 81 |     }
 82 |   },
 83 |   inject: ['formBtnText'],
 84 |   methods: {
 85 |     confirm: function() {
 86 |       let val = null;
 87 |       if (this.formatSelected === 'array' || this.formatSelected === 'object') {
 88 |         val = [];
 89 |       } else {
 90 |         val = this.valName;
 91 |       }
 92 | 
 93 |       let objData = {
 94 |         key: this.needName ? this.keyName : null,
 95 |         val: val,
 96 |         type: this.formatSelected
 97 |       };
 98 | 
 99 |       this.$emit('confirm', objData);
100 |       this.keyName = '';
101 |       this.valName = '';
102 |       this.formatSelected = 'string';
103 |     },
104 | 
105 |     cancel: function() {
106 |       this.$emit('cancel');
107 |     },
108 | 
109 |     dealBoolean: function() {
110 |       this.valName = Boolean(this.valName);
111 |     },
112 | 
113 |     dealNumber: function() {
114 |       this.valName = Number(this.valName);
115 |     }
116 |   }
117 | };
118 | </script>
119 | 
120 | <style lang="less" scoped>
121 | .f-input,
122 | .f-btns {
123 |   display: inline-block;
124 | }
125 | 
126 | .f-btns {
127 |   display: inline-block;
128 |   margin-top: 0.5em;
129 | }
130 | 
131 | .f-confirm {
132 |   color: #fff;
133 |   background: #05a5d1;
134 | }
135 | 
136 | .add-form {
137 |   margin-bottom: 20px;
138 |   font-size: 0.6em;
139 | }
140 | </style>


--------------------------------------------------------------------------------
/src/JsonEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <json-view 
  3 |     :parsedData="parsedData" 
  4 |     v-model="parsedData"></json-view>
  5 | </template>
  6 | 
  7 | <script>
  8 | import JsonView from "./JsonView.vue";
  9 | import cloneDeep from "lodash.clonedeep";
 10 | 
 11 | export default {
 12 |   name: "JsonEditor",
 13 |   props: {
 14 |     objData: {
 15 |       type: [Object, Array],
 16 |       required: true 
 17 |     },
 18 |     options: {
 19 |       type: Object,
 20 |       default: function () {
 21 |         return { 
 22 |           confirmText: "confirm",
 23 |           cancelText: "cancel"
 24 |         }
 25 |       },
 26 |     }
 27 |   },
 28 |   provide () {
 29 |     return {
 30 |       formBtnText: this.options
 31 |     }
 32 |   },
 33 |   data () {
 34 |     return {
 35 |       parsedData: [],
 36 |       wrapperType: 'object'
 37 |     };
 38 |   },
 39 |   created () {
 40 |     this.lastParsedData = {};
 41 |     this.parsedData = this.jsonParse(this.objData);
 42 |   },
 43 |   watch: {
 44 |     objData: {
 45 |       handler(newValue, oldValue) {
 46 |         this.parsedData = this.jsonParse(this.objData);
 47 |       }
 48 |     },
 49 |     parsedData: {
 50 |       handler(newValue, oldValue) {
 51 |         
 52 |         if (JSON.stringify(newValue) === JSON.stringify(this.lastParsedData)) {
 53 |           return;
 54 |         }
 55 | 
 56 |         this.lastParsedData = cloneDeep(newValue);
 57 |         
 58 |         this.$emit("input", this.makeJson(this.parsedData));
 59 |       },
 60 |       deep: true
 61 |     }
 62 |   },
 63 |   components: {
 64 |     "json-view": JsonView
 65 |   },
 66 |   methods: {
 67 |     jsonParse: function (jsonStr) {
 68 |       const parseJson = json => {
 69 |         let result = [];
 70 |         let keys = Object.keys(json);
 71 |         keys.forEach((k, index) => {
 72 |           let val = json[k];
 73 |           let parsedVal = val;
 74 | 
 75 |           if (this.getType(val) == "object") {
 76 |             parsedVal = parseJson(val);
 77 | 
 78 |           } else if (this.getType(val) == "array") {
 79 |             parsedVal = parseArray(val);
 80 |           }
 81 | 
 82 |           let opt = {
 83 |             name: k,
 84 |             type: this.getType(val)
 85 |           };
 86 | 
 87 |           if (opt.type == "array" || opt.type == "object") {
 88 |             opt.childParams = parsedVal;
 89 |             opt.remark = null;
 90 |           } else {
 91 |             opt.childParams = null;
 92 |             opt.remark = parsedVal;
 93 |           }
 94 | 
 95 |           result.push(opt);
 96 |         });
 97 |         return result;
 98 |       };
 99 | 
100 |       //
101 |       const parseArray = arrayObj => {
102 |         let result = [];
103 |         for (let i = 0; i < arrayObj.length; ++i) {
104 |           let val = arrayObj[i];
105 |           let parsedVal = val;
106 |           if (this.getType(val) == "object") {
107 |             parsedVal = parseJson(val);
108 | 
109 |           } else if (this.getType(val) == "array") {
110 |             parsedVal = parseArray(val);
111 |           }
112 | 
113 |           let opt = {
114 |             name: null,
115 |             type: this.getType(val)
116 |           };
117 | 
118 |           if (opt.type == "array" || opt.type == "object") {
119 |             opt.childParams = parsedVal;
120 |             opt.remark = null;
121 |           } else {
122 |             opt.childParams = null;
123 |             opt.remark = parsedVal;
124 |           }
125 | 
126 |           result.push(opt);
127 |         }
128 |         return result;
129 |       };
130 | 
131 |       // --
132 |       const parseBody = data => {
133 |         let r = null;
134 |         switch(this.getType(data)) {
135 |           case 'array':
136 |             this.wrapperType = 'array';
137 |             r = parseArray(data);
138 |             break;
139 |           case 'object':
140 |             this.wrapperType = 'object';
141 |             r = parseJson(data);
142 |             break;
143 |         }
144 |         return r;
145 |       };
146 | 
147 |       return parseBody(jsonStr);
148 |     },
149 | 
150 |     getType: function (obj) {
151 |       switch (Object.prototype.toString.call(obj)) {
152 |         case "[object Array]":
153 |           return "array";
154 |           break;
155 |         case "[object Object]":
156 |           return "object";
157 |           break;
158 |         case "[object Null]":
159 |         case "[object Function]":
160 |         case "[object Undefined]":
161 |           return "string"
162 |           break;
163 |         default:
164 |           return typeof obj;
165 |           break;
166 |       }
167 |     },
168 | 
169 |     makeJson: function (dataArr) {
170 |       const revertWithObj = data => {
171 |         let r = {};
172 |         for (let i = 0; i < data.length; ++i) {
173 |           let el = data[i];
174 |           let key, val;
175 |           key = el.name;
176 |           if (el.type == "array") {
177 |             val = revertWithArray(el.childParams);
178 |           } else if (el.type == "object") {
179 |             val = revertWithObj(el.childParams);
180 |           } else {
181 |             val = el.remark;
182 |           }
183 | 
184 |           r[key] = val;
185 |         }
186 |         return r;
187 |       };
188 | 
189 |       const revertWithArray = data => {
190 |         let arr = [];
191 |         for (let i = 0; i < data.length; ++i) {
192 |           let el = data[i];
193 |           let r;
194 |           if (el.type == "array") {
195 |             r = revertWithArray(el.childParams);
196 |           } else if (el.type == "object") {
197 |             r = revertWithObj(el.childParams);
198 |           } else {
199 |             r = el.remark;
200 |           }
201 | 
202 |           arr.push(r);
203 |         }
204 |         return arr;
205 |       };
206 | 
207 |       const revertMain = data => {
208 |         let r = null;
209 |         switch(this.wrapperType) {
210 |           case 'array':
211 |             
212 |             r = revertWithArray(data);
213 |             break;
214 |           case 'object':
215 |             r = revertWithObj(data);
216 |             break;
217 |         }
218 |         return r;
219 |       };
220 | 
221 |       return revertMain(dataArr);
222 |     }
223 |   }
224 | };
225 | </script>
226 | 


--------------------------------------------------------------------------------
/src/JsonView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="json-view-main">
  3 |     <div class="block_content">
  4 |       <draggable v-model="flowData" handle=".dragbar" @end="onDragEnd">
  5 |         <div
  6 |           v-for="(item, index) in flowData"
  7 |           :key="`${item.type}${index}`"
  8 |           :class="['block', 'clearfix', {'hide-block': hideMyBlock[index] == true}]"
  9 |         >
 10 |           <span class="json-key">
 11 |             <input
 12 |               type="text"
 13 |               v-model="item.name"
 14 |               class="key-input"
 15 |               v-if="typeof item.name == 'string'"
 16 |               @blur="keyInputBlur(item, $event)"
 17 |             />
 18 |             <i
 19 |               class="collapse-down v-json-edit-icon-arrow_drop_down"
 20 |               v-if="item.type == 'object' || item.type == 'array'"
 21 |               @click="closeBlock(index, $event)"
 22 |             ></i>
 23 |             <i v-if="item.type == 'object'" class="i-type">{{'{' + item.childParams.length + '}'}}</i>
 24 |             <i v-if="item.type == 'array'" class="i-type">{{'[' + item.childParams.length + ']'}}</i>
 25 |           </span>
 26 |           <span class="json-val">
 27 |             <template v-if="item.type == 'object'">
 28 |               <json-view :parsedData="item.childParams" v-model="item.childParams"></json-view>
 29 |             </template>
 30 | 
 31 |             <template v-else-if="item.type == 'array'">
 32 |               <array-view :parsedData="item.childParams" v-model="item.childParams"></array-view>
 33 |             </template>
 34 | 
 35 |             <template v-else>
 36 |               <span class="val">
 37 |                 <input
 38 |                   type="text"
 39 |                   v-model="item.remark"
 40 |                   class="val-input"
 41 |                   v-if="item.type == 'string'"
 42 |                 />
 43 |                 <input
 44 |                   type="number"
 45 |                   v-model.number="item.remark"
 46 |                   class="val-input"
 47 |                   v-if="item.type == 'number'"
 48 |                   @input="numberInputChange(item)"
 49 |                 />
 50 |                 <select
 51 |                   name="value"
 52 |                   v-model="item.remark"
 53 |                   class="val-input"
 54 |                   v-if="item.type == 'boolean'"
 55 |                 >
 56 |                   <option :value="true">true</option>
 57 |                   <option :value="false">false</option>
 58 |                 </select>
 59 |               </span>
 60 |             </template>
 61 |           </span>
 62 | 
 63 |           <div class="tools">
 64 |             <select v-model="item.type" class="tools-types" @change="itemTypeChange(item)">
 65 |               <option v-for="(type, index) in formats" :value="type" :key="index">{{type}}</option>
 66 |             </select>
 67 |             <i class="dragbar v-json-edit-icon-drag"></i>
 68 |             <i class="del-btn" @click="delItem(parsedData, item, index)">
 69 |               <i class="v-json-edit-icon-huishouzhan_huaban"></i>
 70 |             </i>
 71 |           </div>
 72 |         </div>
 73 |       </draggable>
 74 | 
 75 |       <item-add-form v-if="toAddItem" @confirm="newItem" @cancel="cancelNewItem"></item-add-form>
 76 | 
 77 |       <div class="block add-key" @click="addItem" v-if="!toAddItem">
 78 |         <i class="v-json-edit-icon-add"></i>
 79 |       </div>
 80 |     </div>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import ItemAddForm from "./ItemAddForm.vue";
 86 | 
 87 | export default {
 88 |   name: "JsonView",
 89 |   props: { parsedData: {} },
 90 |   data() {
 91 |     return {
 92 |       formats: ["string", "array", "object", "number", "boolean"],
 93 |       flowData: this.parsedData,
 94 |       toAddItem: false,
 95 |       hideMyBlock: {}
 96 |     };
 97 |   },
 98 |   created() {
 99 |     this.flowData = this.parsedData || {};
100 |   },
101 |   watch: {
102 |     parsedData: {
103 |       handler(newValue, oldValue) {
104 |         this.flowData = this.parsedData;
105 |       }
106 |     }
107 |   },
108 |   components: {
109 |     "item-add-form": ItemAddForm,
110 |     "array-view": () => import("./ArrayView.vue")
111 |   },
112 |   methods: {
113 |     delItem: function(parentDom, item, index) {
114 |       this.flowData.splice(index, 1);
115 |       if (this.hideMyBlock[index]) this.hideMyBlock[index] = false;
116 |       this.$emit("input", this.flowData);
117 |     },
118 | 
119 |     closeBlock: function(index, e) {
120 |       this.$set(
121 |         this.hideMyBlock,
122 |         index,
123 |         this.hideMyBlock[index] ? false : true
124 |       );
125 |     },
126 | 
127 |     addItem: function() {
128 |       this.toAddItem = true;
129 |     },
130 | 
131 |     cancelNewItem: function() {
132 |       this.toAddItem = false;
133 |     },
134 | 
135 |     newItem: function(obj) {
136 |       let oj = {
137 |         name: obj.key,
138 |         type: obj.type
139 |       };
140 |       if (obj.type == "array" || obj.type == "object") {
141 |         oj.childParams = obj.val;
142 |         oj.remark = null;
143 |       } else {
144 |         oj.childParams = null;
145 |         oj.remark = obj.val;
146 |       }
147 | 
148 |       if (!oj.name) {
149 |         alert("please must input a name!");
150 |         return;
151 |       } else {
152 |         this.flowData.push(oj);
153 |         this.$emit("input", this.flowData);
154 |         this.cancelNewItem();
155 |       }
156 |     },
157 | 
158 |     keyInputBlur: function(item, e) {
159 |       if (item.name.length <= 0) {
160 |         alert("please must input a name!");
161 |         item.name = "null";
162 |         e.target.focus();
163 |       }
164 |     },
165 | 
166 |     onDragEnd: function() {
167 |       this.$emit("input", this.flowData);
168 |     },
169 | 
170 |     itemTypeChange: function(item) {
171 |       if (item.type === "array" || item.type === "object") {
172 |         item.childParams = [];
173 |         item.remark = null;
174 |       }
175 |       if (item.type === "boolean") {
176 |         item.remark = true;
177 |       }
178 |       if (item.type === "string") {
179 |         item.remark = "";
180 |       }
181 |       if (item.type === "number") {
182 |         item.remark = 0;
183 |       }
184 |     },
185 | 
186 |     numberInputChange: function(item) {
187 |       if (!item.remark) item.remark = 0;
188 |     }
189 |   }
190 | };
191 | </script>
192 | 
193 | <style lang="less" scoped>
194 | @import "./assets/styles/common.less";
195 | </style>


--------------------------------------------------------------------------------
/src/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/.DS_Store


--------------------------------------------------------------------------------
/src/assets/font/demo.css:
--------------------------------------------------------------------------------
  1 | /* Logo 字体 */
  2 | @font-face {
  3 |   font-family: "iconfont logo";
  4 |   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  5 |   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
  6 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
  7 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
  8 |     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
  9 | }
 10 | 
 11 | .logo {
 12 |   font-family: "iconfont logo";
 13 |   font-size: 160px;
 14 |   font-style: normal;
 15 |   -webkit-font-smoothing: antialiased;
 16 |   -moz-osx-font-smoothing: grayscale;
 17 | }
 18 | 
 19 | /* tabs */
 20 | .nav-tabs {
 21 |   position: relative;
 22 | }
 23 | 
 24 | .nav-tabs .nav-more {
 25 |   position: absolute;
 26 |   right: 0;
 27 |   bottom: 0;
 28 |   height: 42px;
 29 |   line-height: 42px;
 30 |   color: #666;
 31 | }
 32 | 
 33 | #tabs {
 34 |   border-bottom: 1px solid #eee;
 35 | }
 36 | 
 37 | #tabs li {
 38 |   cursor: pointer;
 39 |   width: 100px;
 40 |   height: 40px;
 41 |   line-height: 40px;
 42 |   text-align: center;
 43 |   font-size: 16px;
 44 |   border-bottom: 2px solid transparent;
 45 |   position: relative;
 46 |   z-index: 1;
 47 |   margin-bottom: -1px;
 48 |   color: #666;
 49 | }
 50 | 
 51 | 
 52 | #tabs .active {
 53 |   border-bottom-color: #f00;
 54 |   color: #222;
 55 | }
 56 | 
 57 | .tab-container .content {
 58 |   display: none;
 59 | }
 60 | 
 61 | /* 页面布局 */
 62 | .main {
 63 |   padding: 30px 100px;
 64 |   width: 960px;
 65 |   margin: 0 auto;
 66 | }
 67 | 
 68 | .main .logo {
 69 |   color: #333;
 70 |   text-align: left;
 71 |   margin-bottom: 30px;
 72 |   line-height: 1;
 73 |   height: 110px;
 74 |   margin-top: -50px;
 75 |   overflow: hidden;
 76 |   *zoom: 1;
 77 | }
 78 | 
 79 | .main .logo a {
 80 |   font-size: 160px;
 81 |   color: #333;
 82 | }
 83 | 
 84 | .helps {
 85 |   margin-top: 40px;
 86 | }
 87 | 
 88 | .helps pre {
 89 |   padding: 20px;
 90 |   margin: 10px 0;
 91 |   border: solid 1px #e7e1cd;
 92 |   background-color: #fffdef;
 93 |   overflow: auto;
 94 | }
 95 | 
 96 | .icon_lists {
 97 |   width: 100% !important;
 98 |   overflow: hidden;
 99 |   *zoom: 1;
100 | }
101 | 
102 | .icon_lists li {
103 |   width: 100px;
104 |   margin-bottom: 10px;
105 |   margin-right: 20px;
106 |   text-align: center;
107 |   list-style: none !important;
108 |   cursor: default;
109 | }
110 | 
111 | .icon_lists li .code-name {
112 |   line-height: 1.2;
113 | }
114 | 
115 | .icon_lists .icon {
116 |   display: block;
117 |   height: 100px;
118 |   line-height: 100px;
119 |   font-size: 42px;
120 |   margin: 10px auto;
121 |   color: #333;
122 |   -webkit-transition: font-size 0.25s linear, width 0.25s linear;
123 |   -moz-transition: font-size 0.25s linear, width 0.25s linear;
124 |   transition: font-size 0.25s linear, width 0.25s linear;
125 | }
126 | 
127 | .icon_lists .icon:hover {
128 |   font-size: 100px;
129 | }
130 | 
131 | .icon_lists .svg-icon {
132 |   /* 通过设置 font-size 来改变图标大小 */
133 |   width: 1em;
134 |   /* 图标和文字相邻时，垂直对齐 */
135 |   vertical-align: -0.15em;
136 |   /* 通过设置 color 来改变 SVG 的颜色/fill */
137 |   fill: currentColor;
138 |   /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
139 |       normalize.css 中也包含这行 */
140 |   overflow: hidden;
141 | }
142 | 
143 | .icon_lists li .name,
144 | .icon_lists li .code-name {
145 |   color: #666;
146 | }
147 | 
148 | /* markdown 样式 */
149 | .markdown {
150 |   color: #666;
151 |   font-size: 14px;
152 |   line-height: 1.8;
153 | }
154 | 
155 | .highlight {
156 |   line-height: 1.5;
157 | }
158 | 
159 | .markdown img {
160 |   vertical-align: middle;
161 |   max-width: 100%;
162 | }
163 | 
164 | .markdown h1 {
165 |   color: #404040;
166 |   font-weight: 500;
167 |   line-height: 40px;
168 |   margin-bottom: 24px;
169 | }
170 | 
171 | .markdown h2,
172 | .markdown h3,
173 | .markdown h4,
174 | .markdown h5,
175 | .markdown h6 {
176 |   color: #404040;
177 |   margin: 1.6em 0 0.6em 0;
178 |   font-weight: 500;
179 |   clear: both;
180 | }
181 | 
182 | .markdown h1 {
183 |   font-size: 28px;
184 | }
185 | 
186 | .markdown h2 {
187 |   font-size: 22px;
188 | }
189 | 
190 | .markdown h3 {
191 |   font-size: 16px;
192 | }
193 | 
194 | .markdown h4 {
195 |   font-size: 14px;
196 | }
197 | 
198 | .markdown h5 {
199 |   font-size: 12px;
200 | }
201 | 
202 | .markdown h6 {
203 |   font-size: 12px;
204 | }
205 | 
206 | .markdown hr {
207 |   height: 1px;
208 |   border: 0;
209 |   background: #e9e9e9;
210 |   margin: 16px 0;
211 |   clear: both;
212 | }
213 | 
214 | .markdown p {
215 |   margin: 1em 0;
216 | }
217 | 
218 | .markdown>p,
219 | .markdown>blockquote,
220 | .markdown>.highlight,
221 | .markdown>ol,
222 | .markdown>ul {
223 |   width: 80%;
224 | }
225 | 
226 | .markdown ul>li {
227 |   list-style: circle;
228 | }
229 | 
230 | .markdown>ul li,
231 | .markdown blockquote ul>li {
232 |   margin-left: 20px;
233 |   padding-left: 4px;
234 | }
235 | 
236 | .markdown>ul li p,
237 | .markdown>ol li p {
238 |   margin: 0.6em 0;
239 | }
240 | 
241 | .markdown ol>li {
242 |   list-style: decimal;
243 | }
244 | 
245 | .markdown>ol li,
246 | .markdown blockquote ol>li {
247 |   margin-left: 20px;
248 |   padding-left: 4px;
249 | }
250 | 
251 | .markdown code {
252 |   margin: 0 3px;
253 |   padding: 0 5px;
254 |   background: #eee;
255 |   border-radius: 3px;
256 | }
257 | 
258 | .markdown strong,
259 | .markdown b {
260 |   font-weight: 600;
261 | }
262 | 
263 | .markdown>table {
264 |   border-collapse: collapse;
265 |   border-spacing: 0px;
266 |   empty-cells: show;
267 |   border: 1px solid #e9e9e9;
268 |   width: 95%;
269 |   margin-bottom: 24px;
270 | }
271 | 
272 | .markdown>table th {
273 |   white-space: nowrap;
274 |   color: #333;
275 |   font-weight: 600;
276 | }
277 | 
278 | .markdown>table th,
279 | .markdown>table td {
280 |   border: 1px solid #e9e9e9;
281 |   padding: 8px 16px;
282 |   text-align: left;
283 | }
284 | 
285 | .markdown>table th {
286 |   background: #F7F7F7;
287 | }
288 | 
289 | .markdown blockquote {
290 |   font-size: 90%;
291 |   color: #999;
292 |   border-left: 4px solid #e9e9e9;
293 |   padding-left: 0.8em;
294 |   margin: 1em 0;
295 | }
296 | 
297 | .markdown blockquote p {
298 |   margin: 0;
299 | }
300 | 
301 | .markdown .anchor {
302 |   opacity: 0;
303 |   transition: opacity 0.3s ease;
304 |   margin-left: 8px;
305 | }
306 | 
307 | .markdown .waiting {
308 |   color: #ccc;
309 | }
310 | 
311 | .markdown h1:hover .anchor,
312 | .markdown h2:hover .anchor,
313 | .markdown h3:hover .anchor,
314 | .markdown h4:hover .anchor,
315 | .markdown h5:hover .anchor,
316 | .markdown h6:hover .anchor {
317 |   opacity: 1;
318 |   display: inline-block;
319 | }
320 | 
321 | .markdown>br,
322 | .markdown>p>br {
323 |   clear: both;
324 | }
325 | 
326 | 
327 | .hljs {
328 |   display: block;
329 |   background: white;
330 |   padding: 0.5em;
331 |   color: #333333;
332 |   overflow-x: auto;
333 | }
334 | 
335 | .hljs-comment,
336 | .hljs-meta {
337 |   color: #969896;
338 | }
339 | 
340 | .hljs-string,
341 | .hljs-variable,
342 | .hljs-template-variable,
343 | .hljs-strong,
344 | .hljs-emphasis,
345 | .hljs-quote {
346 |   color: #df5000;
347 | }
348 | 
349 | .hljs-keyword,
350 | .hljs-selector-tag,
351 | .hljs-type {
352 |   color: #a71d5d;
353 | }
354 | 
355 | .hljs-literal,
356 | .hljs-symbol,
357 | .hljs-bullet,
358 | .hljs-attribute {
359 |   color: #0086b3;
360 | }
361 | 
362 | .hljs-section,
363 | .hljs-name {
364 |   color: #63a35c;
365 | }
366 | 
367 | .hljs-tag {
368 |   color: #333333;
369 | }
370 | 
371 | .hljs-title,
372 | .hljs-attr,
373 | .hljs-selector-id,
374 | .hljs-selector-class,
375 | .hljs-selector-attr,
376 | .hljs-selector-pseudo {
377 |   color: #795da3;
378 | }
379 | 
380 | .hljs-addition {
381 |   color: #55a532;
382 |   background-color: #eaffea;
383 | }
384 | 
385 | .hljs-deletion {
386 |   color: #bd2c00;
387 |   background-color: #ffecec;
388 | }
389 | 
390 | .hljs-link {
391 |   text-decoration: underline;
392 | }
393 | 
394 | /* 代码高亮 */
395 | /* PrismJS 1.15.0
396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
397 | /**
398 |  * prism.js default theme for JavaScript, CSS and HTML
399 |  * Based on dabblet (http://dabblet.com)
400 |  * @author Lea Verou
401 |  */
402 | code[class*="language-"],
403 | pre[class*="language-"] {
404 |   color: black;
405 |   background: none;
406 |   text-shadow: 0 1px white;
407 |   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
408 |   text-align: left;
409 |   white-space: pre;
410 |   word-spacing: normal;
411 |   word-break: normal;
412 |   word-wrap: normal;
413 |   line-height: 1.5;
414 | 
415 |   -moz-tab-size: 4;
416 |   -o-tab-size: 4;
417 |   tab-size: 4;
418 | 
419 |   -webkit-hyphens: none;
420 |   -moz-hyphens: none;
421 |   -ms-hyphens: none;
422 |   hyphens: none;
423 | }
424 | 
425 | pre[class*="language-"]::-moz-selection,
426 | pre[class*="language-"] ::-moz-selection,
427 | code[class*="language-"]::-moz-selection,
428 | code[class*="language-"] ::-moz-selection {
429 |   text-shadow: none;
430 |   background: #b3d4fc;
431 | }
432 | 
433 | pre[class*="language-"]::selection,
434 | pre[class*="language-"] ::selection,
435 | code[class*="language-"]::selection,
436 | code[class*="language-"] ::selection {
437 |   text-shadow: none;
438 |   background: #b3d4fc;
439 | }
440 | 
441 | @media print {
442 | 
443 |   code[class*="language-"],
444 |   pre[class*="language-"] {
445 |     text-shadow: none;
446 |   }
447 | }
448 | 
449 | /* Code blocks */
450 | pre[class*="language-"] {
451 |   padding: 1em;
452 |   margin: .5em 0;
453 |   overflow: auto;
454 | }
455 | 
456 | :not(pre)>code[class*="language-"],
457 | pre[class*="language-"] {
458 |   background: #f5f2f0;
459 | }
460 | 
461 | /* Inline code */
462 | :not(pre)>code[class*="language-"] {
463 |   padding: .1em;
464 |   border-radius: .3em;
465 |   white-space: normal;
466 | }
467 | 
468 | .token.comment,
469 | .token.prolog,
470 | .token.doctype,
471 | .token.cdata {
472 |   color: slategray;
473 | }
474 | 
475 | .token.punctuation {
476 |   color: #999;
477 | }
478 | 
479 | .namespace {
480 |   opacity: .7;
481 | }
482 | 
483 | .token.property,
484 | .token.tag,
485 | .token.boolean,
486 | .token.number,
487 | .token.constant,
488 | .token.symbol,
489 | .token.deleted {
490 |   color: #905;
491 | }
492 | 
493 | .token.selector,
494 | .token.attr-name,
495 | .token.string,
496 | .token.char,
497 | .token.builtin,
498 | .token.inserted {
499 |   color: #690;
500 | }
501 | 
502 | .token.operator,
503 | .token.entity,
504 | .token.url,
505 | .language-css .token.string,
506 | .style .token.string {
507 |   color: #9a6e3a;
508 |   background: hsla(0, 0%, 100%, .5);
509 | }
510 | 
511 | .token.atrule,
512 | .token.attr-value,
513 | .token.keyword {
514 |   color: #07a;
515 | }
516 | 
517 | .token.function,
518 | .token.class-name {
519 |   color: #DD4A68;
520 | }
521 | 
522 | .token.regex,
523 | .token.important,
524 | .token.variable {
525 |   color: #e90;
526 | }
527 | 
528 | .token.important,
529 | .token.bold {
530 |   font-weight: bold;
531 | }
532 | 
533 | .token.italic {
534 |   font-style: italic;
535 | }
536 | 
537 | .token.entity {
538 |   cursor: help;
539 | }
540 | 


--------------------------------------------------------------------------------
/src/assets/font/demo_index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8"/>
  5 |   <title>IconFont Demo</title>
  6 |   <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  7 |   <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  8 |   <link rel="stylesheet" href="demo.css">
  9 |   <link rel="stylesheet" href="iconfont.css">
 10 |   <script src="iconfont.js"></script>
 11 |   <!-- jQuery -->
 12 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
 13 |   <!-- 代码高亮 -->
 14 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
 15 | </head>
 16 | <body>
 17 |   <div class="main">
 18 |     <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
 19 |     <div class="nav-tabs">
 20 |       <ul id="tabs" class="dib-box">
 21 |         <li class="dib active"><span>Unicode</span></li>
 22 |         <li class="dib"><span>Font class</span></li>
 23 |         <li class="dib"><span>Symbol</span></li>
 24 |       </ul>
 25 |       
 26 |     </div>
 27 |     <div class="tab-container">
 28 |       <div class="content unicode" style="display: block;">
 29 |           <ul class="icon_lists dib-box">
 30 |           
 31 |             <li class="dib">
 32 |               <span class="icon iconfont">&#xe603;</span>
 33 |                 <div class="name">drag</div>
 34 |                 <div class="code-name">&amp;#xe603;</div>
 35 |               </li>
 36 |           
 37 |             <li class="dib">
 38 |               <span class="icon iconfont">&#xe925;</span>
 39 |                 <div class="name">add_square_outlined</div>
 40 |                 <div class="code-name">&amp;#xe925;</div>
 41 |               </li>
 42 |           
 43 |             <li class="dib">
 44 |               <span class="icon iconfont">&#xe664;</span>
 45 |                 <div class="name">窗口</div>
 46 |                 <div class="code-name">&amp;#xe664;</div>
 47 |               </li>
 48 |           
 49 |             <li class="dib">
 50 |               <span class="icon iconfont">&#xe62b;</span>
 51 |                 <div class="name">arrow_drop_down</div>
 52 |                 <div class="code-name">&amp;#xe62b;</div>
 53 |               </li>
 54 |           
 55 |             <li class="dib">
 56 |               <span class="icon iconfont">&#xe614;</span>
 57 |                 <div class="name">搜索</div>
 58 |                 <div class="code-name">&amp;#xe614;</div>
 59 |               </li>
 60 |           
 61 |             <li class="dib">
 62 |               <span class="icon iconfont">&#xe615;</span>
 63 |                 <div class="name">回收站</div>
 64 |                 <div class="code-name">&amp;#xe615;</div>
 65 |               </li>
 66 |           
 67 |           </ul>
 68 |           <div class="article markdown">
 69 |           <h2 id="unicode-">Unicode 引用</h2>
 70 |           <hr>
 71 | 
 72 |           <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
 73 |           <ul>
 74 |             <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
 75 |             <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
 76 |             <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
 77 |           </ul>
 78 |           <blockquote>
 79 |             <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
 80 |           </blockquote>
 81 |           <p>Unicode 使用步骤如下：</p>
 82 |           <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
 83 | <pre><code class="language-css"
 84 | >@font-face {
 85 |   font-family: 'iconfont';
 86 |   src: url('iconfont.eot');
 87 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 88 |       url('iconfont.woff2') format('woff2'),
 89 |       url('iconfont.woff') format('woff'),
 90 |       url('iconfont.ttf') format('truetype'),
 91 |       url('iconfont.svg#iconfont') format('svg');
 92 | }
 93 | </code></pre>
 94 |           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 95 | <pre><code class="language-css"
 96 | >.iconfont {
 97 |   font-family: "iconfont" !important;
 98 |   font-size: 16px;
 99 |   font-style: normal;
100 |   -webkit-font-smoothing: antialiased;
101 |   -moz-osx-font-smoothing: grayscale;
102 | }
103 | </code></pre>
104 |           <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
105 | <pre>
106 | <code class="language-html"
107 | >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
108 | </code></pre>
109 |           <blockquote>
110 |             <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
111 |           </blockquote>
112 |           </div>
113 |       </div>
114 |       <div class="content font-class">
115 |         <ul class="icon_lists dib-box">
116 |           
117 |           <li class="dib">
118 |             <span class="icon iconfont icon-drag"></span>
119 |             <div class="name">
120 |               drag
121 |             </div>
122 |             <div class="code-name">.icon-drag
123 |             </div>
124 |           </li>
125 |           
126 |           <li class="dib">
127 |             <span class="icon iconfont icon-add_square_outlined"></span>
128 |             <div class="name">
129 |               add_square_outlined
130 |             </div>
131 |             <div class="code-name">.icon-add_square_outlined
132 |             </div>
133 |           </li>
134 |           
135 |           <li class="dib">
136 |             <span class="icon iconfont icon-chuangkou"></span>
137 |             <div class="name">
138 |               窗口
139 |             </div>
140 |             <div class="code-name">.icon-chuangkou
141 |             </div>
142 |           </li>
143 |           
144 |           <li class="dib">
145 |             <span class="icon iconfont icon-arrow_drop_down"></span>
146 |             <div class="name">
147 |               arrow_drop_down
148 |             </div>
149 |             <div class="code-name">.icon-arrow_drop_down
150 |             </div>
151 |           </li>
152 |           
153 |           <li class="dib">
154 |             <span class="icon iconfont icon-sousuo_huaban"></span>
155 |             <div class="name">
156 |               搜索
157 |             </div>
158 |             <div class="code-name">.icon-sousuo_huaban
159 |             </div>
160 |           </li>
161 |           
162 |           <li class="dib">
163 |             <span class="icon iconfont icon-huishouzhan_huaban"></span>
164 |             <div class="name">
165 |               回收站
166 |             </div>
167 |             <div class="code-name">.icon-huishouzhan_huaban
168 |             </div>
169 |           </li>
170 |           
171 |         </ul>
172 |         <div class="article markdown">
173 |         <h2 id="font-class-">font-class 引用</h2>
174 |         <hr>
175 | 
176 |         <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
177 |         <p>与 Unicode 使用方式相比，具有如下特点：</p>
178 |         <ul>
179 |           <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
180 |           <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
181 |           <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
182 |           <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
183 |         </ul>
184 |         <p>使用步骤如下：</p>
185 |         <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
186 | <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
187 | </code></pre>
188 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
189 | <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
190 | </code></pre>
191 |         <blockquote>
192 |           <p>"
193 |             iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
194 |         </blockquote>
195 |       </div>
196 |       </div>
197 |       <div class="content symbol">
198 |           <ul class="icon_lists dib-box">
199 |           
200 |             <li class="dib">
201 |                 <svg class="icon svg-icon" aria-hidden="true">
202 |                   <use xlink:href="#icon-drag"></use>
203 |                 </svg>
204 |                 <div class="name">drag</div>
205 |                 <div class="code-name">#icon-drag</div>
206 |             </li>
207 |           
208 |             <li class="dib">
209 |                 <svg class="icon svg-icon" aria-hidden="true">
210 |                   <use xlink:href="#icon-add_square_outlined"></use>
211 |                 </svg>
212 |                 <div class="name">add_square_outlined</div>
213 |                 <div class="code-name">#icon-add_square_outlined</div>
214 |             </li>
215 |           
216 |             <li class="dib">
217 |                 <svg class="icon svg-icon" aria-hidden="true">
218 |                   <use xlink:href="#icon-chuangkou"></use>
219 |                 </svg>
220 |                 <div class="name">窗口</div>
221 |                 <div class="code-name">#icon-chuangkou</div>
222 |             </li>
223 |           
224 |             <li class="dib">
225 |                 <svg class="icon svg-icon" aria-hidden="true">
226 |                   <use xlink:href="#icon-arrow_drop_down"></use>
227 |                 </svg>
228 |                 <div class="name">arrow_drop_down</div>
229 |                 <div class="code-name">#icon-arrow_drop_down</div>
230 |             </li>
231 |           
232 |             <li class="dib">
233 |                 <svg class="icon svg-icon" aria-hidden="true">
234 |                   <use xlink:href="#icon-sousuo_huaban"></use>
235 |                 </svg>
236 |                 <div class="name">搜索</div>
237 |                 <div class="code-name">#icon-sousuo_huaban</div>
238 |             </li>
239 |           
240 |             <li class="dib">
241 |                 <svg class="icon svg-icon" aria-hidden="true">
242 |                   <use xlink:href="#icon-huishouzhan_huaban"></use>
243 |                 </svg>
244 |                 <div class="name">回收站</div>
245 |                 <div class="code-name">#icon-huishouzhan_huaban</div>
246 |             </li>
247 |           
248 |           </ul>
249 |           <div class="article markdown">
250 |           <h2 id="symbol-">Symbol 引用</h2>
251 |           <hr>
252 | 
253 |           <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
254 |             这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
255 |           <ul>
256 |             <li>支持多色图标了，不再受单色限制。</li>
257 |             <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
258 |             <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
259 |             <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
260 |           </ul>
261 |           <p>使用步骤如下：</p>
262 |           <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
263 | <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
264 | </code></pre>
265 |           <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
266 | <pre><code class="language-html">&lt;style&gt;
267 | .icon {
268 |   width: 1em;
269 |   height: 1em;
270 |   vertical-align: -0.15em;
271 |   fill: currentColor;
272 |   overflow: hidden;
273 | }
274 | &lt;/style&gt;
275 | </code></pre>
276 |           <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
277 | <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
278 |   &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
279 | &lt;/svg&gt;
280 | </code></pre>
281 |           </div>
282 |       </div>
283 | 
284 |     </div>
285 |   </div>
286 |   <script>
287 |   $(document).ready(function () {
288 |       $('.tab-container .content:first').show()
289 | 
290 |       $('#tabs li').click(function (e) {
291 |         var tabContent = $('.tab-container .content')
292 |         var index = $(this).index()
293 | 
294 |         if ($(this).hasClass('active')) {
295 |           return
296 |         } else {
297 |           $('#tabs li').removeClass('active')
298 |           $(this).addClass('active')
299 | 
300 |           tabContent.hide().eq(index).fadeIn()
301 |         }
302 |       })
303 |     })
304 |   </script>
305 | </body>
306 | </html>
307 | 


--------------------------------------------------------------------------------
/src/assets/font/fontello.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/fontello.eot


--------------------------------------------------------------------------------
/src/assets/font/fontello.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
 5 | <defs>
 6 | <font id="fontello" horiz-adv-x="1000" >
 7 | <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 8 | <missing-glyph horiz-adv-x="1000" />
 9 | <glyph glyph-name="trash" unicode="&#xe800;" d="M0 633l0 141 289 0 0 76 246 0 0-76 289 0 0-141-824 0z m43-783l0 676 738 0 0-676-738 0z" horiz-adv-x="824" />
10 | 
11 | <glyph glyph-name="plus" unicode="&#xe801;" d="M0 209l0 282 359 0 0 359 282 0 0-359 359 0 0-282-359 0 0-359-282 0 0 359-359 0z" horiz-adv-x="1000" />
12 | 
13 | <glyph glyph-name="down-open" unicode="&#xe802;" d="M0 526l148 148 352-351 352 351 148-148-352-352-148-148-148 148z" horiz-adv-x="1000" />
14 | </font>
15 | </defs>
16 | </svg>


--------------------------------------------------------------------------------
/src/assets/font/fontello.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/fontello.ttf


--------------------------------------------------------------------------------
/src/assets/font/fontello.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/fontello.woff


--------------------------------------------------------------------------------
/src/assets/font/fontello.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/fontello.woff2


--------------------------------------------------------------------------------
/src/assets/font/iconfont.css:
--------------------------------------------------------------------------------
 1 | @font-face {font-family: "iconfont";
 2 |   src: url('iconfont.eot?t=1578908417703'); /* IE9 */
 3 |   src: url('iconfont.eot?t=1578908417703#iefix') format('embedded-opentype'), /* IE6-IE8 */
 4 |   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATkAAsAAAAACpQAAASWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDVgqHRIYoATYCJAMcCxAABCAFhG0HgQcbHwnIHpIkSEABBQooMA8ucTz8t9//9pmZK1/UEO8e1SqLZJrwDlVLYnVKJ4slQno//57vuUmZPCOPGuhmc3mTOl0wsN3cTtan3M6fgPNv/P/gWPKX/1vl2duDvGJGLbJ5NBxQVFGU8AaSwjaF2NUu6JHAiwl0m1cJHevUYwDoFMpWgbjp4M2gC5mUHFxotXXKgQXiHai1aTZxFcBb+/PjH9QLHUiqDMqOp290tEGbn+TLItL/32+YaYFAew5wh5GxAyjEs1TXU6Sb2oHU/bmNynGgVyspP8lnyc8qntleFv2fEE+STHGEXhXV/w8eoVIrskTUAFUvjbmcrvlJ6gbxUSfBoII6GaJ8dQUMCtQ2cMj8KWokgcY8oB/zIHYDxCNQNAds1yByf5dIqtCrf3+cqjAuPotMiYmOYjQqF7VyZ2h3YFdwh8EdiaFl7js+JngTVJ/PNowN3UHqwO1hMepYGw0vltJ0aDlCBimwjKJIwSUAD/NiqSEcZslIZGD0vXsG4u7dAc4jN7OItbcaRh+/g8jA7UZRUlTK7kDH+juNo4/eyibW3GxAQU/p05PhMB89aDwbeciG5wy4O8Vw6x4divQ2LB3MSt5wYOD5SOhey3v+1MIgH9wBxItBClqz7TK4OwR3WCm06lwxteVMGlChhH8nTasMRWyWUU1PqdBSYAA/NXwaJXuVeqrT5ep0ak94M3Q3XG5dqPcF2JX4Apb8X2vzdXv+Llapd97gdOqv6svRRedUsGdsB2QcgrquRB2HjOiKNnRAI0I7b4AO10Z0QetXmuI1GzTxpg02vmRbaVx8a48NXVDye0DHqU7p2jjTSh9o32uQr7h//a5oyAjUYQPqahwCmf8vlgWN7zaaNYt1UVoTdnEZGpZzZdSp56/foaVYqpPqrkyvn+7e3n/QM+B32st8qp3+CoP6P4P1/2PiYxhdlWXaFuZ6fGyce/BCK7rDgTMHOtCtLiQp2hQU6aLMA6+h7LOoBUFsNAIDnlHuld4QOwA6Zz8JdORf2QNA+o4+pSEDBvI0eS/t11g8q55ojG3xVUerAL61G4bsUEeB+pr2VimjpvAVFZfsU75SxdwUuXN9U4HGaXHgpiq61TG8mr5hT9vTjJVOENqQmIOkMQdZaxVRMDug0uMA1FoHodt2nQ/vMUJEiqIHtplOQRi0H5J+XyEbdA1RME+gMu4t1AaDhG4XI/GEPdbDQbUXsVnGNsYylnFYBS+nWWXKqe6HecVtFoNSm85iUXJEmbrq2mi2M/ZisY1dpFF8PVnmGE4UPEwn6nLY7RYYnyg4sVWutsuyr1lNDZf2RNVWwQOUo0SYmQyzYViMxXCwEnhx5sIyKvbx/WA8hZuZmNPhh5uFiSSO5TPqVKstgeis8pbqcCz1JaPw6pFJgsPguEqBB6MTcWBuNSVg+NLXc8KsZNXsNRI+zdSQgbiyqur+NZ7jvAi6Ke/cBIFIpEJqpEFapINyXTTziWabzSiNVMwiNgqK7HZ4sU1vtStmL+8SlFizKAqjjTZR8Bl8p743WhIUSRGMeX6L2ZtgNXdIdkEZZzd7o0YAAA==') format('woff2'),
 5 |   url('iconfont.woff?t=1578908417703') format('woff'),
 6 |   url('iconfont.ttf?t=1578908417703') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 7 |   url('iconfont.svg?t=1578908417703#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family: "iconfont" !important;
12 |   font-size: 16px;
13 |   font-style: normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-drag:before {
19 |   content: "\e603";
20 | }
21 | 
22 | .icon-add_square_outlined:before {
23 |   content: "\e925";
24 | }
25 | 
26 | .icon-chuangkou:before {
27 |   content: "\e664";
28 | }
29 | 
30 | .icon-arrow_drop_down:before {
31 |   content: "\e62b";
32 | }
33 | 
34 | .icon-sousuo_huaban:before {
35 |   content: "\e614";
36 | }
37 | 
38 | .icon-huishouzhan_huaban:before {
39 |   content: "\e615";
40 | }
41 | 
42 | 


--------------------------------------------------------------------------------
/src/assets/font/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/font/iconfont.js:
--------------------------------------------------------------------------------
1 | !function(l){var t,i='<svg><symbol id="icon-drag" viewBox="0 0 1024 1024"><path d="M430 266m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M430 430m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M430 594m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M430 758m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M594 266m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M594 430m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M594 594m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path><path d="M594 758m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#444444" ></path></symbol><symbol id="icon-add_square_outlined" viewBox="0 0 1024 1024"><path d="M810.666667 128H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v597.333334a85.333333 85.333333 0 0 0 85.333333 85.333333h597.333334a85.333333 85.333333 0 0 0 85.333333-85.333333V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333z m0 682.666667H213.333333V213.333333h597.333334zM362.666667 554.666667H469.333333v106.666666a21.333333 21.333333 0 0 0 21.333334 21.333334h42.666666a21.333333 21.333333 0 0 0 21.333334-21.333334V554.666667h106.666666a21.333333 21.333333 0 0 0 21.333334-21.333334v-42.666666a21.333333 21.333333 0 0 0-21.333334-21.333334H554.666667V362.666667a21.333333 21.333333 0 0 0-21.333334-21.333334h-42.666666a21.333333 21.333333 0 0 0-21.333334 21.333334V469.333333H362.666667a21.333333 21.333333 0 0 0-21.333334 21.333334v42.666666a21.333333 21.333333 0 0 0 21.333334 21.333334z"  ></path></symbol><symbol id="icon-chuangkou" viewBox="0 0 1024 1024"><path d="M172.8 1017.6c-89.6 0-166.4-70.4-166.4-166.4V441.6c0-89.6 70.4-166.4 166.4-166.4h416c89.6 0 166.4 70.4 166.4 166.4v416c0 89.6-70.4 166.4-166.4 166.4l-416-6.4z m0-659.2c-51.2 0-89.6 38.4-89.6 89.6v416c0 51.2 38.4 89.6 89.6 89.6h416c51.2 0 89.6-38.4 89.6-89.6V441.6c0-51.2-38.4-89.6-89.6-89.6H172.8z"  ></path><path d="M851.2 19.2H435.2C339.2 19.2 268.8 96 268.8 185.6v25.6h70.4v-25.6c0-51.2 38.4-89.6 89.6-89.6h409.6c51.2 0 89.6 38.4 89.6 89.6v409.6c0 51.2-38.4 89.6-89.6 89.6h-38.4V768h51.2c96 0 166.4-76.8 166.4-166.4V185.6c0-96-76.8-166.4-166.4-166.4z"  ></path></symbol><symbol id="icon-arrow_drop_down" viewBox="0 0 1024 1024"><path d="M284.444444 398.222222h455.111112l-227.896889 284.444445z" fill="#5A6677" ></path></symbol><symbol id="icon-sousuo_huaban" viewBox="0 0 1024 1024"><path d="M887.3 842.05L750.38 705.13C865.55 566.98 858.5 360.7 728.9 231.09c-137.25-137.25-360.56-137.25-497.81 0-137.23 137.25-137.23 360.56 0 497.81C299.72 797.53 389.86 831.83 480 831.83c80.11 0 160.13-27.24 225.13-81.44L842.05 887.3c6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38c12.51-12.5 12.51-32.75 0.01-45.25zM276.34 683.66c-112.28-112.3-112.28-295.02 0-407.31 56.16-56.14 129.91-84.2 203.66-84.2s147.5 28.06 203.66 84.2c112.28 112.3 112.28 295.02 0 407.31-112.32 112.25-295.04 112.25-407.32 0z"  ></path></symbol><symbol id="icon-huishouzhan_huaban" viewBox="0 0 1024 1024"><path d="M416 384c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32s32-14.33 32-32V416c0-17.67-14.33-32-32-32zM576 416v288c0 17.67 14.33 32 32 32s32-14.33 32-32V416c0-17.67-14.33-32-32-32s-32 14.33-32 32z"  ></path><path d="M864 224H671.78c0.03-0.75 0.22-1.45 0.22-2.2v-59.6c0-36.5-29.7-66.2-66.2-66.2H418.2c-36.5 0-66.2 29.7-66.2 66.2v59.59c0 0.75 0.2 1.46 0.22 2.2H160c-17.67 0-32 14.33-32 32s14.33 32 32 32h32v576c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V288h32c17.67 0 32-14.33 32-32s-14.33-32-32-32z m-448-2.2l2.2-61.8 189.8 2.2v59.59c0 1.22-0.98 2.2-2.2 2.2L416 221.8zM768 832H256V288H768v544z"  ></path></symbol></svg>',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(o=t,n=l.document,c=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(i,50)}a()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,a())});function a(){c||(c=!0,o())}var o,n,c,i}(function(){var t,e,a,o,n,c;(t=document.createElement("div")).innerHTML=i,i=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",a=e,(o=document.body).firstChild?(n=a,(c=o.firstChild).parentNode.insertBefore(n,c)):o.appendChild(a))})}(window);


--------------------------------------------------------------------------------
/src/assets/font/iconfont.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "id": "",
 3 |   "name": "",
 4 |   "font_family": "iconfont",
 5 |   "css_prefix_text": "icon-",
 6 |   "description": "",
 7 |   "glyphs": [
 8 |     {
 9 |       "icon_id": "5397020",
10 |       "name": "drag",
11 |       "font_class": "drag",
12 |       "unicode": "e603",
13 |       "unicode_decimal": 58883
14 |     },
15 |     {
16 |       "icon_id": "11981168",
17 |       "name": "add_square_outlined",
18 |       "font_class": "add_square_outlined",
19 |       "unicode": "e925",
20 |       "unicode_decimal": 59685
21 |     },
22 |     {
23 |       "icon_id": "12331647",
24 |       "name": "窗口",
25 |       "font_class": "chuangkou",
26 |       "unicode": "e664",
27 |       "unicode_decimal": 58980
28 |     },
29 |     {
30 |       "icon_id": "12590280",
31 |       "name": "arrow_drop_down",
32 |       "font_class": "arrow_drop_down",
33 |       "unicode": "e62b",
34 |       "unicode_decimal": 58923
35 |     },
36 |     {
37 |       "icon_id": "12752068",
38 |       "name": "搜索",
39 |       "font_class": "sousuo_huaban",
40 |       "unicode": "e614",
41 |       "unicode_decimal": 58900
42 |     },
43 |     {
44 |       "icon_id": "12752070",
45 |       "name": "回收站",
46 |       "font_class": "huishouzhan_huaban",
47 |       "unicode": "e615",
48 |       "unicode_decimal": 58901
49 |     }
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/src/assets/font/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="iconfont" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="iconfont"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="drag" unicode="&#58883;" d="M430 630m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM430 466m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM430 302m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM430 138m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM594 630m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM594 466m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM594 302m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0ZM594 138m-50 0a50 50 0 1 1 100 0 50 50 0 1 1-100 0Z"  horiz-adv-x="1024" />
24 | 
25 |     
26 |     <glyph glyph-name="add_square_outlined" unicode="&#59685;" d="M810.666667 768H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-597.333334a85.333333 85.333333 0 0 1 85.333333-85.333333h597.333334a85.333333 85.333333 0 0 1 85.333333 85.333333V682.666667a85.333333 85.333333 0 0 1-85.333333 85.333333z m0-682.666667H213.333333V682.666667h597.333334zM362.666667 341.333333H469.333333v-106.666666a21.333333 21.333333 0 0 1 21.333334-21.333334h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333334V341.333333h106.666666a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334H554.666667V533.333333a21.333333 21.333333 0 0 1-21.333334 21.333334h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333334V426.666667H362.666667a21.333333 21.333333 0 0 1-21.333334-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333334-21.333334z"  horiz-adv-x="1024" />
27 | 
28 |     
29 |     <glyph glyph-name="chuangkou" unicode="&#58980;" d="M172.8-121.6c-89.6 0-166.4 70.4-166.4 166.4V454.4c0 89.6 70.4 166.4 166.4 166.4h416c89.6 0 166.4-70.4 166.4-166.4v-416c0-89.6-70.4-166.4-166.4-166.4l-416 6.4z m0 659.2c-51.2 0-89.6-38.4-89.6-89.6v-416c0-51.2 38.4-89.6 89.6-89.6h416c51.2 0 89.6 38.4 89.6 89.6V454.4c0 51.2-38.4 89.6-89.6 89.6H172.8zM851.2 876.8H435.2C339.2 876.8 268.8 800 268.8 710.4v-25.6h70.4v25.6c0 51.2 38.4 89.6 89.6 89.6h409.6c51.2 0 89.6-38.4 89.6-89.6v-409.6c0-51.2-38.4-89.6-89.6-89.6h-38.4V128h51.2c96 0 166.4 76.8 166.4 166.4V710.4c0 96-76.8 166.4-166.4 166.4z"  horiz-adv-x="1024" />
30 | 
31 |     
32 |     <glyph glyph-name="arrow_drop_down" unicode="&#58923;" d="M284.444444 497.777778h455.111112l-227.896889-284.444445z"  horiz-adv-x="1024" />
33 | 
34 |     
35 |     <glyph glyph-name="sousuo_huaban" unicode="&#58900;" d="M887.3 53.95L750.38 190.87C865.55 329.02 858.5 535.3 728.9 664.91c-137.25 137.25-360.56 137.25-497.81 0-137.23-137.25-137.23-360.56 0-497.81C299.72 98.47 389.86 64.17 480 64.17c80.11 0 160.13 27.24 225.13 81.44L842.05 8.7c6.25-6.25 14.44-9.38 22.62-9.38s16.38 3.12 22.62 9.38c12.51 12.5 12.51 32.75 0.01 45.25zM276.34 212.34c-112.28 112.3-112.28 295.02 0 407.31 56.16 56.14 129.91 84.2 203.66 84.2s147.5-28.06 203.66-84.2c112.28-112.3 112.28-295.02 0-407.31-112.32-112.25-295.04-112.25-407.32 0z"  horiz-adv-x="1024" />
36 | 
37 |     
38 |     <glyph glyph-name="huishouzhan_huaban" unicode="&#58901;" d="M416 512c-17.67 0-32-14.33-32-32v-288c0-17.67 14.33-32 32-32s32 14.33 32 32V480c0 17.67-14.33 32-32 32zM576 480v-288c0-17.67 14.33-32 32-32s32 14.33 32 32V480c0 17.67-14.33 32-32 32s-32-14.33-32-32zM864 672H671.78c0.03 0.75 0.22 1.45 0.22 2.2v59.6c0 36.5-29.7 66.2-66.2 66.2H418.2c-36.5 0-66.2-29.7-66.2-66.2v-59.59c0-0.75 0.2-1.46 0.22-2.2H160c-17.67 0-32-14.33-32-32s14.33-32 32-32h32v-576c0-17.67 14.33-32 32-32h576c17.67 0 32 14.33 32 32V608h32c17.67 0 32 14.33 32 32s-14.33 32-32 32z m-448 2.2l2.2 61.8 189.8-2.2v-59.59c0-1.22-0.98-2.2-2.2-2.2L416 674.2zM768 64H256V608H768v-544z"  horiz-adv-x="1024" />
39 | 
40 |     
41 | 
42 | 
43 |   </font>
44 | </defs></svg>
45 | 


--------------------------------------------------------------------------------
/src/assets/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/font/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jinkin1995/vue-json-edit/a0ecb7a2cf91fea75ee64a27653b9db1a792e6e0/src/assets/font/iconfont.woff2


--------------------------------------------------------------------------------
/src/assets/styles/common.less:
--------------------------------------------------------------------------------
  1 | @import "./pure/base-min.less";
  2 | @import "./pure/buttons-min.less";
  3 | @import "./pure/forms-min.less";
  4 | @import "./fontello.less";
  5 | 
  6 | .json-view-main::v-deep {
  7 |     p {
  8 |         margin: 0;
  9 |     }
 10 |     
 11 |     ol, ul {
 12 |         margin: 0;
 13 |     }
 14 |     
 15 |     .block{
 16 |         position: relative;
 17 |         display: block;
 18 |         line-height: 30px;
 19 |     }
 20 |     
 21 |     .block.hide-block {
 22 |         background: #f5f5f5;
 23 |     
 24 |         .json-val {
 25 |             display: none;
 26 |         }
 27 |     
 28 |         .collapse-down {
 29 |             transform: rotate(-90deg);
 30 |         }
 31 |     }
 32 |     
 33 |     .tools {
 34 |         position: absolute;
 35 |         right: 0;
 36 |         top: 0;
 37 |         height: 30px;
 38 |     }
 39 |     
 40 |     .tools-types {
 41 |         position: relative;
 42 |         right: 20px;
 43 |     }
 44 |     
 45 |     .del-btn {
 46 |         cursor: pointer;
 47 |         transition: opacity .4s ease;
 48 |     
 49 |         &:hover {
 50 |             opacity: .6;
 51 |         }
 52 |     }
 53 |     
 54 |     .dragbar {
 55 |         position: absolute;
 56 |         top: 0;
 57 |         right: 20px;
 58 |         bottom: 0;
 59 |         width: 5px;
 60 |         font-size: 18px;
 61 |         margin-right: 15px;
 62 |         cursor: pointer;
 63 |     }
 64 |     
 65 |     .des {
 66 |         position: absolute;
 67 |         right: 14px;
 68 |         font-size: 10px;
 69 |         line-height: 30px;
 70 |         color: #6190e8;
 71 |         cursor: pointer;
 72 |     }
 73 |     
 74 |     .add-des {
 75 |         color: #999;
 76 |     }
 77 |     
 78 |     .block_content {
 79 |         text-align: left;
 80 |         margin-left: 20px;
 81 |         line-height: 1.5 !important;
 82 |     
 83 |         .i-type {
 84 |             color: #999;
 85 |         }
 86 |     
 87 |         .key-input,
 88 |         .val-input {
 89 |             width: 140px;
 90 |             border: none;
 91 |             height: 25px;
 92 |             padding: 0 5px;
 93 |             font-weight: bold;
 94 |             font-size: 14px;
 95 |             background: rgba(0,0,0,0);
 96 |     
 97 |             &:focus {
 98 |                 background: #ffffa0;
 99 |                 border: none;
100 |                 outline: 0;
101 |             }
102 |         }
103 |     
104 |         .val-input {
105 |             font-weight: normal;
106 |             color: #0b8e6b;
107 |         }
108 |     }
109 |     
110 |     .block_content .json-key {
111 |         font-weight: bold;
112 |     
113 |         &.json-desc {
114 |             color: #999;
115 |             font-size: .8em;
116 |         }
117 |     }
118 |     
119 |     
120 |     .collopsed:before {
121 |         content: '';
122 |         display: inline-block;
123 |         height: 10px;
124 |         width: 10px;
125 |         background: #333;
126 |     }
127 |     
128 |     .collapse-down {
129 |         float: left;
130 |         color: #000;
131 |         cursor: pointer;
132 |         transition: transform .2s ease;
133 |     }
134 |     
135 |     .add-key {
136 |         display: inline-block;
137 |         padding-left: 2px;
138 |         padding-right: 2px;
139 |         margin-bottom: 10px;
140 |         font-size: .8em;
141 |         line-height: 1em;
142 |         cursor: pointer;
143 |     }
144 |     
145 |     
146 |     .array-ol {
147 |         padding-left: 20px !important;
148 |     }
149 |     
150 |     .array-item {
151 |         position: relative;
152 |     
153 |         &.hide-item {
154 |             background: #f5f5f5;
155 |     
156 |             .json-val {
157 |                 display: none;
158 |             }
159 |     
160 |             .collapse-down {
161 |                 transform: rotate(-90deg);
162 |                 transition: transform .4s ease;
163 |             }
164 |         }
165 |     }
166 | }
167 | 


--------------------------------------------------------------------------------
/src/assets/styles/fontello.less:
--------------------------------------------------------------------------------
 1 | @font-face {font-family: "iconfont";
 2 |   src: url('../font/iconfont.eot?t=1578908417703'); /* IE9 */
 3 |   src: url('../font/iconfont.eot?t=1578908417703#iefix') format('embedded-opentype'), /* IE6-IE8 */
 4 |   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATkAAsAAAAACpQAAASWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDVgqHRIYoATYCJAMcCxAABCAFhG0HgQcbHwnIHpIkSEABBQooMA8ucTz8t9//9pmZK1/UEO8e1SqLZJrwDlVLYnVKJ4slQno//57vuUmZPCOPGuhmc3mTOl0wsN3cTtan3M6fgPNv/P/gWPKX/1vl2duDvGJGLbJ5NBxQVFGU8AaSwjaF2NUu6JHAiwl0m1cJHevUYwDoFMpWgbjp4M2gC5mUHFxotXXKgQXiHai1aTZxFcBb+/PjH9QLHUiqDMqOp290tEGbn+TLItL/32+YaYFAew5wh5GxAyjEs1TXU6Sb2oHU/bmNynGgVyspP8lnyc8qntleFv2fEE+STHGEXhXV/w8eoVIrskTUAFUvjbmcrvlJ6gbxUSfBoII6GaJ8dQUMCtQ2cMj8KWokgcY8oB/zIHYDxCNQNAds1yByf5dIqtCrf3+cqjAuPotMiYmOYjQqF7VyZ2h3YFdwh8EdiaFl7js+JngTVJ/PNowN3UHqwO1hMepYGw0vltJ0aDlCBimwjKJIwSUAD/NiqSEcZslIZGD0vXsG4u7dAc4jN7OItbcaRh+/g8jA7UZRUlTK7kDH+juNo4/eyibW3GxAQU/p05PhMB89aDwbeciG5wy4O8Vw6x4divQ2LB3MSt5wYOD5SOhey3v+1MIgH9wBxItBClqz7TK4OwR3WCm06lwxteVMGlChhH8nTasMRWyWUU1PqdBSYAA/NXwaJXuVeqrT5ep0ak94M3Q3XG5dqPcF2JX4Apb8X2vzdXv+Llapd97gdOqv6svRRedUsGdsB2QcgrquRB2HjOiKNnRAI0I7b4AO10Z0QetXmuI1GzTxpg02vmRbaVx8a48NXVDye0DHqU7p2jjTSh9o32uQr7h//a5oyAjUYQPqahwCmf8vlgWN7zaaNYt1UVoTdnEZGpZzZdSp56/foaVYqpPqrkyvn+7e3n/QM+B32st8qp3+CoP6P4P1/2PiYxhdlWXaFuZ6fGyce/BCK7rDgTMHOtCtLiQp2hQU6aLMA6+h7LOoBUFsNAIDnlHuld4QOwA6Zz8JdORf2QNA+o4+pSEDBvI0eS/t11g8q55ojG3xVUerAL61G4bsUEeB+pr2VimjpvAVFZfsU75SxdwUuXN9U4HGaXHgpiq61TG8mr5hT9vTjJVOENqQmIOkMQdZaxVRMDug0uMA1FoHodt2nQ/vMUJEiqIHtplOQRi0H5J+XyEbdA1RME+gMu4t1AaDhG4XI/GEPdbDQbUXsVnGNsYylnFYBS+nWWXKqe6HecVtFoNSm85iUXJEmbrq2mi2M/ZisY1dpFF8PVnmGE4UPEwn6nLY7RYYnyg4sVWutsuyr1lNDZf2RNVWwQOUo0SYmQyzYViMxXCwEnhx5sIyKvbx/WA8hZuZmNPhh5uFiSSO5TPqVKstgeis8pbqcCz1JaPw6pFJgsPguEqBB6MTcWBuNSVg+NLXc8KsZNXsNRI+zdSQgbiyqur+NZ7jvAi6Ke/cBIFIpEJqpEFapINyXTTziWabzSiNVMwiNgqK7HZ4sU1vtStmL+8SlFizKAqjjTZR8Bl8p743WhIUSRGMeX6L2ZtgNXdIdkEZZzd7o0YAAA==') format('woff2'),
 5 |   url('../font/iconfont.woff?t=1578908417703') format('woff'),
 6 |   url('../font/iconfont.ttf?t=1578908417703') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 7 |   url('../font/iconfont.svg?t=1578908417703#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | [class^="v-json-edit-icon-"]:before, 
11 | [class*=" v-json-edit-icon-"]:before {
12 |   font-family: "iconfont" !important;
13 |   font-style: normal;
14 |   font-weight: normal;
15 |   speak: none;
16 |  
17 |   display: inline-block;
18 |   text-decoration: inherit;
19 |   width: 1em;
20 |   margin-right: .2em;
21 |   text-align: center;
22 |   /* opacity: .8; */
23 |  
24 |   /* For safety - reset parent styles, that can break glyph codes*/
25 |   font-variant: normal;
26 |   text-transform: none;
27 |  
28 |   /* fix buttons height, for twitter bootstrap */
29 |   line-height: 1em;
30 |  
31 |   /* Animation center compensation - margins should be symmetric */
32 |   /* remove if not needed */
33 |   margin-left: .2em;
34 |  
35 |   /* you can be more comfortable with increased icons size */
36 |   /* font-size: 120%; */
37 |  
38 |   /* Font smoothing. That was taken from TWBS */
39 |   -webkit-font-smoothing: antialiased;
40 |   -moz-osx-font-smoothing: grayscale;
41 |  
42 |   /* Uncomment for 3D effect */
43 |   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
44 | }
45 | 
46 | .iconfont {
47 |   font-family: "iconfont" !important;
48 |   font-size: 16px;
49 |   font-style: normal;
50 |   -webkit-font-smoothing: antialiased;
51 |   -moz-osx-font-smoothing: grayscale;
52 | }
53 | 
54 | .v-json-edit-icon-drag:before {
55 |   content: "\e603";
56 | }
57 | 
58 | .v-json-edit-icon-add:before {
59 |   content: "\e925";
60 | }
61 | 
62 | .v-json-edit-icon-copy:before {
63 |   content: "\e664";
64 | }
65 | 
66 | .v-json-edit-icon-arrow_drop_down:before {
67 |   content: "\e62b";
68 | }
69 | 
70 | .v-json-edit-icon-sousuo_huaban:before {
71 |   content: "\e614";
72 | }
73 | 
74 | .v-json-edit-icon-huishouzhan_huaban:before {
75 |   content: "\e615";
76 | }
77 | 
78 | 


--------------------------------------------------------------------------------
/src/assets/styles/pure/base-min.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 | Pure v1.0.0
 3 | Copyright 2013 Yahoo!
 4 | Licensed under the BSD License.
 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md
 6 | */
 7 | /*!
 8 | normalize.css v^3.0 | MIT License | git.io/normalize
 9 | Copyright (c) Nicolas Gallagher and Jonathan Neal
10 | */
11 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block}


--------------------------------------------------------------------------------
/src/assets/styles/pure/base-min.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 | Pure v1.0.0
 3 | Copyright 2013 Yahoo!
 4 | Licensed under the BSD License.
 5 | https://github.com/yahoo/pure/blob/master/LICENSE.md
 6 | */
 7 | /*!
 8 | normalize.css v^3.0 | MIT License | git.io/normalize
 9 | Copyright (c) Nicolas Gallagher and Jonathan Neal
10 | */
11 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block}


--------------------------------------------------------------------------------
/src/assets/styles/pure/buttons-min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | Pure v1.0.0
3 | Copyright 2013 Yahoo!
4 | Licensed under the BSD License.
5 | https://github.com/yahoo/pure/blob/master/LICENSE.md
6 | */
7 | .pure-button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-group{letter-spacing:-.31em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-button-group{word-spacing:-.43em}.pure-button{font-family:inherit;font-size:100%;padding:.5em 1em;color:#444;color:rgba(0,0,0,.8);border:1px solid #999;border:transparent;background-color:#E6E6E6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{filter:alpha(opacity=90);background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;border-color:#000\9}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{border:none;background-image:none;filter:alpha(opacity=40);opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}.pure-button-hidden{display:none}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-button-group .pure-button{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;margin:0;border-radius:0;border-right:1px solid #111;border-right:1px solid rgba(0,0,0,.2)}.pure-button-group .pure-button:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.pure-button-group .pure-button:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:none}


--------------------------------------------------------------------------------
/src/assets/styles/pure/buttons-min.less:
--------------------------------------------------------------------------------
1 | /*!
2 | Pure v1.0.0
3 | Copyright 2013 Yahoo!
4 | Licensed under the BSD License.
5 | https://github.com/yahoo/pure/blob/master/LICENSE.md
6 | */
7 | .pure-button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-group{letter-spacing:-.31em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-button-group{word-spacing:-.43em}.pure-button{font-family:inherit;font-size:100%;padding:.5em 1em;color:#444;color:rgba(0,0,0,.8);border:1px solid #999;border:transparent;background-color:#E6E6E6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{filter:alpha(opacity=90);background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;border-color:#000\9}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{border:none;background-image:none;filter:alpha(opacity=40);opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}.pure-button-hidden{display:none}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-button-group .pure-button{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;margin:0;border-radius:0;border-right:1px solid #111;border-right:1px solid rgba(0,0,0,.2)}.pure-button-group .pure-button:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.pure-button-group .pure-button:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:none}


--------------------------------------------------------------------------------
/src/assets/styles/pure/forms-min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | Pure v1.0.0
3 | Copyright 2013 Yahoo!
4 | Licensed under the BSD License.
5 | https://github.com/yahoo/pure/blob/master/LICENSE.md
6 | */
7 | .pure-form input[type=text],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;vertical-align:middle;box-sizing:border-box}.pure-form input:not([type]){padding:.5em .6em;display:inline-block;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;box-sizing:border-box}.pure-form input[type=color]{padding:.2em .5em}.pure-form input:not([type]):focus,.pure-form input[type=text]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;border-color:#129FEA}.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus,.pure-form input[type=checkbox]:focus{outline:#129FEA auto 1px}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input:not([type])[disabled],.pure-form input[type=text][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly]{background-color:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid{color:#b94a48;border-color:#e9322d}.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{height:2.25em;border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input:not([type]),.pure-form-stacked input[type=text],.pure-form-stacked input[type=number],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=color],.pure-form-stacked input[type=file],.pure-form-stacked input[type=password],.pure-form-stacked input[type=email],.pure-form-stacked input[type=url],.pure-form-stacked input[type=date],.pure-form-stacked input[type=month],.pure-form-stacked input[type=time],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=week],.pure-form-stacked label,.pure-form-stacked select,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-aligned .pure-help-inline,.pure-form-aligned input,.pure-form-aligned select,.pure-form-aligned textarea,.pure-form-message-inline{display:inline-block;vertical-align:middle}.pure-form-aligned textarea{vertical-align:top}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 11em}.pure-form .pure-input-rounded,.pure-form input.pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input,.pure-form .pure-group textarea{display:block;padding:10px;margin:0 0 -1px;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus,.pure-form .pure-group textarea:focus{z-index:3}.pure-form .pure-group input:first-child,.pure-form .pure-group textarea:first-child{top:1px;border-radius:4px 4px 0 0;margin:0}.pure-form .pure-group input:first-child:last-child,.pure-form .pure-group textarea:first-child:last-child{top:1px;border-radius:4px;margin:0}.pure-form .pure-group input:last-child,.pure-form .pure-group textarea:last-child{top:-2px;border-radius:0 0 4px 4px;margin:0}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-3-4{width:75%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form .pure-help-inline,.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:.875em}.pure-form-message{display:block;color:#666;font-size:.875em}@media only screen and (max-width :480px){.pure-form button[type=submit]{margin:.7em 0 0}.pure-form input:not([type]),.pure-form input[type=text],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form label{margin-bottom:.3em;display:block}.pure-group input:not([type]),.pure-group input[type=text],.pure-group input[type=number],.pure-group input[type=search],.pure-group input[type=tel],.pure-group input[type=color],.pure-group input[type=password],.pure-group input[type=email],.pure-group input[type=url],.pure-group input[type=date],.pure-group input[type=month],.pure-group input[type=time],.pure-group input[type=datetime],.pure-group input[type=datetime-local],.pure-group input[type=week]{margin-bottom:0}.pure-form-aligned .pure-control-group label{margin-bottom:.3em;text-align:left;display:block;width:100%}.pure-form-aligned .pure-controls{margin:1.5em 0 0}.pure-form .pure-help-inline,.pure-form-message,.pure-form-message-inline{display:block;font-size:.75em;padding:.2em 0 .8em}}


--------------------------------------------------------------------------------
/src/assets/styles/pure/forms-min.less:
--------------------------------------------------------------------------------
1 | /*!
2 | Pure v1.0.0
3 | Copyright 2013 Yahoo!
4 | Licensed under the BSD License.
5 | https://github.com/yahoo/pure/blob/master/LICENSE.md
6 | */
7 | .pure-form input[type=text],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;vertical-align:middle;box-sizing:border-box}.pure-form input:not([type]){padding:.5em .6em;display:inline-block;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;box-sizing:border-box}.pure-form input[type=color]{padding:.2em .5em}.pure-form input:not([type]):focus,.pure-form input[type=text]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;border-color:#129FEA}.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus,.pure-form input[type=checkbox]:focus{outline:#129FEA auto 1px}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input:not([type])[disabled],.pure-form input[type=text][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly]{background-color:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid{color:#b94a48;border-color:#e9322d}.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{height:2.25em;border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input:not([type]),.pure-form-stacked input[type=text],.pure-form-stacked input[type=number],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=color],.pure-form-stacked input[type=file],.pure-form-stacked input[type=password],.pure-form-stacked input[type=email],.pure-form-stacked input[type=url],.pure-form-stacked input[type=date],.pure-form-stacked input[type=month],.pure-form-stacked input[type=time],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=week],.pure-form-stacked label,.pure-form-stacked select,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-aligned .pure-help-inline,.pure-form-aligned input,.pure-form-aligned select,.pure-form-aligned textarea,.pure-form-message-inline{display:inline-block;vertical-align:middle}.pure-form-aligned textarea{vertical-align:top}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 11em}.pure-form .pure-input-rounded,.pure-form input.pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input,.pure-form .pure-group textarea{display:block;padding:10px;margin:0 0 -1px;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus,.pure-form .pure-group textarea:focus{z-index:3}.pure-form .pure-group input:first-child,.pure-form .pure-group textarea:first-child{top:1px;border-radius:4px 4px 0 0;margin:0}.pure-form .pure-group input:first-child:last-child,.pure-form .pure-group textarea:first-child:last-child{top:1px;border-radius:4px;margin:0}.pure-form .pure-group input:last-child,.pure-form .pure-group textarea:last-child{top:-2px;border-radius:0 0 4px 4px;margin:0}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-3-4{width:75%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form .pure-help-inline,.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:.875em}.pure-form-message{display:block;color:#666;font-size:.875em}@media only screen and (max-width :480px){.pure-form button[type=submit]{margin:.7em 0 0}.pure-form input:not([type]),.pure-form input[type=text],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form label{margin-bottom:.3em;display:block}.pure-group input:not([type]),.pure-group input[type=text],.pure-group input[type=number],.pure-group input[type=search],.pure-group input[type=tel],.pure-group input[type=color],.pure-group input[type=password],.pure-group input[type=email],.pure-group input[type=url],.pure-group input[type=date],.pure-group input[type=month],.pure-group input[type=time],.pure-group input[type=datetime],.pure-group input[type=datetime-local],.pure-group input[type=week]{margin-bottom:0}.pure-form-aligned .pure-control-group label{margin-bottom:.3em;text-align:left;display:block;width:100%}.pure-form-aligned .pure-controls{margin:1.5em 0 0}.pure-form .pure-help-inline,.pure-form-message,.pure-form-message-inline{display:block;font-size:.75em;padding:.2em 0 .8em}}


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import JsonEditor from './JsonEditor.vue'
 2 | import JsonView from './JsonView.vue'
 3 | import ArrayView from './ArrayView.vue'
 4 | import draggable from 'vuedraggable'
 5 | import PackageFile from '../package.json'
 6 | 
 7 | const VERSION = PackageFile.version
 8 | 
 9 | const install = (Vue) => {
10 |   if (install.installed) return
11 | 
12 |   Vue.component('draggable', draggable)
13 |   Vue.component('JsonEditor', JsonEditor)
14 |   Vue.component('json-view', JsonView)
15 |   Vue.component('array-view', ArrayView)
16 | 
17 | }
18 | 
19 | export default install
20 | 
21 | export const components = {
22 |   JsonEditor,
23 |   VERSION
24 | }


--------------------------------------------------------------------------------
/webpack.base.js:
--------------------------------------------------------------------------------
 1 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 2 | 
 3 | const config = {};
 4 | 
 5 | config.module = {
 6 | 	rules: [{
 7 | 			test: /\.vue$/,
 8 | 			loader: 'vue-loader',
 9 | 		},
10 | 		{
11 | 			test: /\.js$/,
12 | 			loader: 'babel-loader',
13 | 			exclude: file => (
14 | 				/node_modules/.test(file) &&
15 | 				!/\.vue\.js/.test(file)
16 | 			),
17 | 			query: {
18 | 					presets: ['es2015', 'stage-0']
19 | 			}
20 | 		},
21 | 		{
22 | 			test: /\.css$/,
23 | 			use: [
24 | 				'vue-style-loader',
25 | 				'css-loader'
26 | 			]
27 | 		},
28 | 		{
29 | 			test: /\.less$/,
30 | 			use: [{
31 | 				loader: "style-loader" // 将 JS 字符串生成为 style 节点
32 | 			}, {
33 | 				loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
34 | 			}, {
35 | 				loader: "less-loader"
36 | 			}]
37 | 		},
38 | 		{
39 | 			test: /\.(png|jpg|gif|webp)$/,
40 | 			loader: 'file-loader',
41 | 			options: {
42 | 				name: '[name].[ext]?[hash]',
43 | 			},
44 | 		},
45 | 		{
46 | 			test: /\.svg/,
47 | 			loader: 'url-loader',
48 | 		}, {
49 | 			test: /\.(woff2?|woff|eot|ttf|otf)(\?.*)?$/,
50 | 			loader: 'url-loader',
51 | 			options: {
52 | 				name: '[name].[ext]?[hash]'
53 | 			}
54 | 		}
55 | 	]
56 | }
57 | 
58 | config.plugins = [
59 | 	new VueLoaderPlugin(),
60 | ]
61 | 
62 | module.exports = config;


--------------------------------------------------------------------------------
/webpack.build.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const baseConfig = require('./webpack.base');
 3 | 
 4 | const config = baseConfig;
 5 | 
 6 | config.mode = 'production';
 7 | config.entry = './src/index.js';
 8 | 
 9 | config.optimization = {
10 |     minimize: true,
11 | }
12 | 
13 | config.output = {
14 |   path: path.resolve(__dirname, './dist'),
15 |   filename: 'vue-json-edit.js',
16 |   library: 'vue-json-edit',
17 |   libraryTarget: 'umd',
18 | };
19 | config.externals = {
20 |   vue: 'Vue',
21 | };
22 | 
23 | module.exports = config


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const baseConfig = require('./webpack.base');
 4 | 
 5 | const config = baseConfig;
 6 | 
 7 | config.mode = 'development';
 8 | 
 9 | config.entry = './example/main.js';
10 | config.output = {
11 |   path: path.resolve(__dirname, './example/dist/'),
12 |   publicPath: '',
13 |   filename: '[name]_[hash].js',
14 | };
15 | 
16 | config.devtool = 'inline-source-map';
17 | config.devServer = {
18 | 	contentBase: './dist'
19 | };
20 | 
21 | config.plugins = config.plugins.concat([
22 | 	new HtmlWebpackPlugin({
23 | 		template: './example/index.html'
24 | 	})
25 | ])
26 | 
27 | module.exports = config
28 | 


--------------------------------------------------------------------------------