feat: 按钮文本配置

Author: jinkin1995

.babelrc

@@ -1,3 +1,12 @@
 {
-  "presets": ["es2015", "stage-0"]
+  "presets": ["es2015", "stage-0"],
+  "plugins": [[
+    "transform-runtime",
+    {
+      "helpers": false,
+      "polyfill": false,
+      "regenerator": true,
+      "moduleName": "babel-runtime"
+    }
+  ]]
 }

dist/vue-json-edit.js

@@ -4,7 +4,13 @@
 		<div class="editor-w clearfix">
 			<div class="w-2">
 				<div class="editor">
-					<JsonEditor :objData="jsonData" v-model="jsonData" ></JsonEditor>
+					<JsonEditor
+						:options="{
+							confirmText: 'confirm',
+							cancelText: 'cancel',
+						}"
+						:objData="jsonData" 
+						v-model="jsonData" ></JsonEditor>
 				</div>
 			</div>
 			<div class="w-2">
@@ -47,14 +53,6 @@ export default {
 			this.drawResCode(c)
 		}
 	},
-	async beforeCreate() {
-		setTimeout(
-		(() => {
-			this.jsonData = { test: 4123 };
-		}).bind(this),
-		2000,
-		);
-	},
 	methods: {
 		//JSON format print
 		formatJson: function(txt, compress /*是否为压缩模式*/) {

example/App.vue

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-edit",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "visual JSON editor built as an vue component",
   "author": "Jinkin1995 <[email protected]>",
   "keywords": [
@@ -26,6 +26,7 @@
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^2.1.0",

example/dist/index.html

@@ -1,9 +1,19 @@
 <template>
   <div class="add-form pure-form">
     <div class="f-input">
-      <input type="text" v-model="keyName" class="f-input-m" placeholder="name" v-if="needName">
+      <input 
+        type="text" 
+        v-model="keyName"
+        v-if="needName"
+        class="f-input-m" 
+        placeholder="name">
       <select v-model="formatSelected" class="f-input-m">
-        <option :value="item" v-for="(item, index) in formats" :key="index">{{item}}</option>
+        <option 
+          v-for="(item, index) in formats"
+          :value="item"
+          :key="index">
+          {{item}}
+        </option>
       </select>
       <span class="f-input-m">
         <b>:</b>
@@ -39,33 +49,42 @@
     </div>
 
     <div class="f-btns">
-      <button class="pure-button f-confirm" @click="confirm">确定</button>
-      <button class="pure-button" @click="cancel">取消</button>
+      <button 
+        class="pure-button f-confirm" 
+        @click="confirm">
+        {{ this.formBtnText.confirmText }}
+      </button>
+      <button 
+        class="pure-button"
+        @click="cancel">
+        {{ this.formBtnText.cancelText }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "ItemAddForm",
-  data: function() {
+  name: 'ItemAddForm',
+  data () {
     return {
-      formats: ["string", "array", "object", "number", "boolean"],
-      formatSelected: "string",
+      formats: ['string', 'array', 'object', 'number', 'boolean'],
+      formatSelected: 'string',
       //--
-      keyName: "",
-      valName: ""
+      keyName: '',
+      valName: ''
     };
   },
   props: {
     needName: {
       default: true
     }
   },
+  inject: ['formBtnText'],
   methods: {
     confirm: function() {
       let val = null;
-      if (this.formatSelected === "array" || this.formatSelected === "object") {
+      if (this.formatSelected === 'array' || this.formatSelected === 'object') {
         val = [];
       } else {
         val = this.valName;
@@ -77,14 +96,14 @@ export default {
         type: this.formatSelected
       };
 
-      this.$emit("confirm", objData);
-      this.keyName = "";
-      this.valName = "";
-      this.formatSelected = "string";
+      this.$emit('confirm', objData);
+      this.keyName = '';
+      this.valName = '';
+      this.formatSelected = 'string';
     },
 
     cancel: function() {
-      this.$emit("cancel");
+      this.$emit('cancel');
     },
 
     dealBoolean: function() {

example/dist/main_4d70b9573aa3e07171c0.js

@@ -2,17 +2,29 @@
   <json-view :parsedData="parsedData" v-model="parsedData"></json-view>
 </template>
 
-
 <script>
 export default {
   name: "JsonEditor",
-  props: { objData: { required: true } },
-  data: function() {
+  props: {
+    objData: {
+      type: Object,
+      required: true 
+    },
+    options: {
+      type: Object,
+    }
+  },
+  provide () {
+    return {
+      formBtnText: this.options
+    }
+  },
+  data () {
     return {
       parsedData: []
     };
   },
-  created: function() {
+  created () {
     this.lastParsedData = {};
     this.parsedData = this.jsonParse(this.objData);
   },
@@ -35,7 +47,7 @@ export default {
     }
   },
   methods: {
-    jsonParse: function(jsonStr) {
+    jsonParse: function (jsonStr) {
       let parseJson = json => {
         let result = [];
         let keys = Object.keys(json);
@@ -105,7 +117,7 @@ export default {
       return parseBody(jsonStr);
     },
 
-    getType: function(obj) {
+    getType: function (obj) {
       switch (Object.prototype.toString.call(obj)) {
         case "[object Array]":
           return "array";
@@ -119,7 +131,7 @@ export default {
       }
     },
 
-    makeJson: function(dataArr) {
+    makeJson: function (dataArr) {
       let revertWithObj = function(data) {
         let r = {};
         for (let i = 0; i < data.length; ++i) {

package-lock.json

@@ -58,9 +58,15 @@
       </span>
     </span>
 
-    <item-add-form v-if="toAddItem" @confirm="newItem" @cancel="cancelNewItem"></item-add-form>
+    <item-add-form 
+      v-if="toAddItem" 
+      @confirm="newItem" 
+      @cancel="cancelNewItem"></item-add-form>
 
-    <div class="block add-key" @click="addItem" v-if="!toAddItem">
+    <div 
+      class="block add-key" 
+      @click="addItem" 
+      v-if="!toAddItem">
       <i class="icon-plus"></i>
     </div>
   </div>
@@ -72,15 +78,15 @@ import ItemAddForm from "./ItemAddForm.vue";
 export default {
   name: "JsonView",
   props: { parsedData: {} },
-  data: function() {
+  data () {
     return {
       flowData: [],
       toAddItem: false,
       hideMyBlock: {}
     };
   },
 
-  created: function() {
+  created () {
     this.flowData = this.parsedData;
   },
   watch: {