调整外部数据更新后插件内自动同步相关

examples/components/index.vue

@@ -11,6 +11,9 @@
     <el-input type="erea-text" v-model="realText" @input="textToAddress" />
 
     {{ reAddress }}
+
+        <v-distpicker v-model="address2"> </v-distpicker>
+    {{ address2 }}
   </div>
 </template>
 
@@ -45,6 +48,14 @@ export default {
         city: "市辖区",
         area_code: "",
         area: "河北区",
+      },
+       address2: {
+        province_code: "",
+        province: "",
+        city_code: "",
+        city: "",
+        area_code: "",
+        area: "",
       },
       realText: "浙江省温州市龙湾区蒲州街道xx路111号 15555555555 刘啊",
       reAddress: {},
@@ -65,6 +76,17 @@ export default {
         textFilter: ["电話", "電話", "聯系人"],
       });
       console.log(this.reAddress);
+
+
+this.address2={
+        province_code: "",
+        province: this.reAddress.province,
+        city_code: "",
+        city: this.reAddress.city,
+        area_code: "",
+        area: this.reAddress.area,
+      }
+
     },
   },
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "address-parse",
   "description": "A flexible, highly available district selector for picking provinces, cities and districts of China.",
-  "version": "1.2.9",
+  "version": "1.0.1",
   "author": "jcc <changejian@gmail.com>",
   "license": "MIT",
   "repository": "jcc/address-parse",

src/Distpicker.vue

@@ -115,12 +115,34 @@ export default {
     };
   },
   created() {
-    this.defaultAddr = JSON.parse(JSON.stringify(this.value));
-    this.created = true;
-    this.checkProvince();
-    this.checkCity();
-    this.checkArea();
-    this.created = false;
+    this.init();
+  },
+  // computed: {
+  //   defaultAddr: {
+  //     set(v) {
+  //       console.log(v, 3);
+  //       this.$emit("cancel", v);
+  //     },
+  //     get() {
+  //       // return this.showModel;
+  //       console.log(2);
+  //       // 感觉使用setTimeout不是很严谨，但是目前还没有找到更好的办法解决
+  //       setTimeout(() => {
+  //         this.created = true;
+  //         this.checkProvince();
+  //         this.checkCity();
+  //         this.checkArea();
+  //         this.created = false;
+  //       }, 100);
+
+  //       return JSON.parse(JSON.stringify(this.value));
+  //     },
+  //   },
+  // },
+  mounted() {
+    this.$watch("value", (res) => {
+      this.init();
+    });
   },
   //  不知道是哪里姿势不对用了此方法就一直无法获取父主键传过来的v-model
   // model: {
@@ -147,6 +169,21 @@ export default {
   // },
   watch: {},
   methods: {
+    init() {
+      let newAddress = JSON.stringify(this.value);
+      let oldAddress = JSON.stringify(this.defaultAddr);
+      console.log(newAddress.toString(), oldAddress.toString());
+
+      if (newAddress.toString() != oldAddress.toString()) {
+        this.defaultAddr = JSON.parse(newAddress);
+        console.log(1111);
+        this.checkProvince();
+        this.checkCity();
+        this.checkArea();
+
+        this.$emit("input", this.defaultAddr);
+      }
+    },
     // 选择省
     checkProvince() {
       this.provinceJson.forEach((element) => {
@@ -160,12 +197,13 @@ export default {
 
           this.defaultAddr.province_code = element.code;
           this.defaultAddr.province = element.name;
-
-          this.$emit("input", this.defaultAddr);
-          if (!this.created) {
-            this.defaultAddr.city_code = "";
-            this.defaultAddr.area_code = "";
-          }
+          this.defaultAddr.city_code = "";
+          this.defaultAddr.area_code = "";
+          // if (!this.created) {
+          //   this.$emit("input", this.defaultAddr);
+          //   this.defaultAddr.city_code = "";
+          //   this.defaultAddr.area_code = "";
+          // }
         }
       });
     },
@@ -178,13 +216,15 @@ export default {
           (!this.defaultAddr.code && element.name == this.defaultAddr.city)
         ) {
           this.areaJson = element.children;
-          if (!this.created) {
-            this.defaultAddr.area_code = "";
-          }
+
           this.defaultAddr.city_code = element.code;
           this.defaultAddr.city = element.name;
+          this.defaultAddr.area_code = "";
 
-          this.$emit("input", this.defaultAddr);
+          // if (!this.created) {
+          //   this.$emit("input", this.defaultAddr);
+          //   this.defaultAddr.area_code = "";
+          // }
         }
       });
     },
@@ -199,7 +239,9 @@ export default {
         ) {
           this.defaultAddr.area_code = element.code;
           this.defaultAddr.area = element.name;
-          this.$emit("input", this.defaultAddr);
+          // if (!this.created) {
+          //   this.$emit("input", this.defaultAddr);
+          // }
         }
       });
     },