优化选择地区自动绑定model以及地址自动识别示例编写

examples/App.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="container">
     <index></index>
-   
+
   </div>
 </template>
 
 <script>
 import index from './components/index'
-
 export default {
+  data(){
+    return{
+
+    }
+  },
   components: {
     index,
-   
   },
 }
 </script>

examples/components/index.vue

@@ -1,25 +1,72 @@
 <template>
   <div class="app-container">
-      <v-distpicker> </v-distpicker>
+    地区选择
+
+    <v-distpicker v-model="address"> </v-distpicker>
+    {{ address }}
+
+    <v-distpicker v-model="address1"> </v-distpicker>
+    {{ address1 }}
+    地址识别
+    <el-input type="erea-text" v-model="realText" @input="textToAddress" />
+
+    {{ reAddress }}
   </div>
 </template>
 
 <script>
-import VDistpicker from "../../src/Distpicker"
+// import VDistpicker from "../../src/Distpicker"
+import index from "../../src/index";
+let VDistpicker = index.VDistpicker;
+let AddressParse = index.AddressParse;
+
 // import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
   name: "ArticleList",
-    components: { VDistpicker },
+  components: { VDistpicker },
 
   data() {
-    return {};
+    return {
+      // address:'121'
+      address: {
+        province_code: "12",
+        province: "",
+        city_code: "1201",
+        city: "",
+        area_code: "120102",
+        area: "",
+      },
+
+      address1: {
+        province_code: "",
+        province: "天津市",
+        city_code: "",
+        city: "市辖区",
+        area_code: "",
+        area: "河北区",
+      },
+      realText: "浙江省温州市龙湾区蒲州街道xx路111号 15555555555 刘啊",
+      reAddress: {},
+    };
   },
   beforeCreated() {},
   watch: {},
-  created() {},
+  created() {
+    this.textToAddress();
+  },
   mounted() {},
-  methods: {},
+  methods: {
+    textToAddress() {
+      console.log(11);
+      let type = 1;
+      this.reAddress = AddressParse(this.realText, {
+        type,
+        textFilter: ["电話", "電話", "聯系人"],
+      });
+      console.log(this.reAddress);
+    },
+  },
 };
 </script>
 

examples/index.html

@@ -4,8 +4,7 @@
   <meta charset="utf-8">
   <link rel="shortcut icon" href="https://pigjian.com/images/v-distpicker.ico">
   <title>V - Distpicker Example</title>
-  <link href="//cdn.bootcss.com/prism/9000.0.1/themes/prism.min.css" rel="stylesheet">
-  <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
+  <!-- <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"> -->
   <script src="//cdn.bootcss.com/prism/9000.0.1/prism.min.js"></script>
   <style type="text/css">
     body { margin: 0; padding: 0; }

examples/main.js

@@ -1,5 +1,8 @@
 import Vue from 'vue'
 import App from './App'
+import ElementUI from 'element-ui'
+// import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
 
 new Vue({
   el: '#app',