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

build/webpack.dev.config.js

@@ -41,10 +41,14 @@ module.exports = {
       test: /\.css$/,
       use: 'css-loader',
     }, 
-    // {
+    {
-    //   test: /\.scss$/,
+      test: /\.scss$/,
-    //   use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      use: ['vue-style-loader', 'css-loader', 'sass-loader']
-    // },
+    },
+    {
+      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+      loader: 'file-loader'
+    },
      {
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
       exclude: /node_modules/,

build/webpack.prod.config.js

@@ -28,10 +28,14 @@ module.exports = {
       test: /\.css$/,
       use: 'css-loader',
     }, 
-    // {
+    {
-    //   test: /\.scss$/,
+      test: /\.scss$/,
-    //   use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      use: ['vue-style-loader', 'css-loader', 'sass-loader']
-    // }, 
+    }, 
+    {
+      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+      loader: 'file-loader'
+    },
     {
       test: /\.js$/,
       use: ['babel-loader', 'eslint-loader'],

examples/App.vue

@@ -7,11 +7,14 @@
 
 <script>
 import index from './components/index'
-
 export default {
+  data(){
+    return{
+
+    }
+  },
   components: {
     index,
-   
   },
 }
 </script>

examples/components/index.vue

@@ -1,11 +1,25 @@
 <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 {
@@ -13,13 +27,46 @@ export default {
   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',

package.json

@@ -30,7 +30,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=./build/webpack.prod.config.js"
   },
   "dependencies": {
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "element-ui": "^2.15.6"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
@@ -42,7 +43,10 @@
     "css-loader": "^2.1.1",
     "eslint": "^4.18.2",
     "eslint-loader": "^2.1.2",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^3.2.0",
+    "sass": "1.26.2",
+    "sass-loader": "8.0.2",
     "url-loader": "^1.1.2",
     "vue-loader": "^15.7.0",
     "vue-style-loader": "^4.0.1",

src/Distpicker.vue

@@ -1,5 +1,47 @@
 <template>
-  <div id="app">
+  <div>
+    <el-select
+      v-model="defaultAddr.province_code"
+      placeholder="请选择省/市"
+      @change="checkProvince"
+    >
+      <el-option
+        v-for="item in provinceJson"
+        :key="item.code"
+        :label="item.name"
+        :value="item.code"
+      >
+      </el-option>
+    </el-select>
+    <el-select
+      v-model="defaultAddr.city_code"
+      placeholder="请选择市/区"
+      @change="checkCity"
+    >
+      <el-option
+        v-for="city in cityJson"
+        :key="city.code"
+        :label="city.name"
+        :value="city.code"
+      >
+      </el-option>
+    </el-select>
+
+    <el-select
+      v-model="defaultAddr.area_code"
+      placeholder="请选择区/县"
+      @change="checkArea"
+    >
+      <el-option
+        v-for="area in areaJson"
+        :key="area.code"
+        :label="area.name"
+        :value="area.code"
+      >
+      </el-option>
+    </el-select>
+
+    <!-- <div class="distpicker-address-wrapper">
       <select
         v-model="province"
         placeholder="请选择省/市"
@@ -24,91 +66,228 @@
           {{ area.name }}
         </option>
       </select>
+    </div> -->
   </div>
 </template>
 
 <script>
+// import { Select as ElSelect,Option as ElOption } from 'element-ui';
+
 import AddressJson from "./lib/address-json";
 console.log(AddressJson);
 export default {
   name: "v-distpicker",
+  // components:{ElSelect,ElOption},
   props: {
-    // province: { type: [String, Number], default: "" },
+    value: {
-    // city: { type: [String, Number], default: "" },
+      type: Object,
-    // area: { type: [String, Number], default: "" },
+      default: () => {
-    // type: { type: String, default: "" },
+        return {
-    // hideArea: { type: Boolean, default: false },
+          province_code: "",
-    // onlyProvince: { type: Boolean, default: false },
+          province: "",
-    // staticPlaceholder: { type: Boolean, default: false },
+          city_code: "",
-    // placeholders: {
+          city: "",
-    //   type: Object,
+          area_code: "",
-    //   default() {
+          area: "",
-    //     return {
+        };
-    //       province: "省",
+      },
-    //       city: "市",
+    },
-    //       area: "区",
+
-    //     };
+    disabled: { type: Boolean, default: false },
-    //   },
+    provinceDisabled: { type: Boolean, default: false },
-    // },
+    cityDisabled: { type: Boolean, default: false },
-    // districts: {
+    areaDisabled: { type: Boolean, default: false },
-    //   type: [Array, Object],
-    //   default() {
-    //     return DISTRICTS;
-    //   },
-    // },
-    // disabled: { type: Boolean, default: false },
-    // provinceDisabled: { type: Boolean, default: false },
-    // cityDisabled: { type: Boolean, default: false },
-    // areaDisabled: { type: Boolean, default: false },
-    // addressHeader: { type: String, default: "address-header" },
-    // addressContainer: { type: String, default: "address-container" },
-    // wrapper: { type: String, default: "distpicker-address-wrapper" },
   },
   data() {
     return {
       provinceJson: AddressJson,
       cityJson: [],
       areaJson: [],
-      codes: [],
+
+      defaultAddr: {
+        province_code: "",
         province: "",
+        city_code: "",
         city: "",
+        area_code: "",
         area: "",
-      // tab: 1,
+      },
-      // showCityTab: false,
-      // showAreaTab: false,
-      // provinces: [],
-      // cities: [],
-      // areas: [],
-      // currentProvince:
-      //   this.determineType(this.province) || this.placeholders.province,
-      // currentCity: this.determineType(this.city) || this.placeholders.city,
-      // currentArea: this.determineType(this.area) || this.placeholders.area,
     };
   },
-  created() {},
+  created() {
+    this.defaultAddr = JSON.parse(JSON.stringify(this.value));
+    this.created = true;
+    this.checkProvince();
+    this.checkCity();
+    this.checkArea();
+    this.created = false;
+  },
+  //  不知道是哪里姿势不对用了此方法就一直无法获取父主键传过来的v-model
+  // model: {
+  //   // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
+  //   prop:
+  //     "defaultAddress",
+
+  //     // {
+  //     //   defaultAddress: {
+  //     //     type: Object,
+  //     //     default: () => {
+  //     //       return {
+  //     //         province_code: "",
+  //     //         province: "",
+  //     //         city_code: "",
+  //     //         city: "",
+  //     //         area_code: "",
+  //     //         area: "",
+  //     //       };
+  //     //     },
+  //     //   },
+  //     // },
+  //   event: "currentAddress",
+  // },
   watch: {},
   methods: {
     // 选择省
-    checkProvince(e, a) {
+    checkProvince() {
-      console.log(e, a);
-      console.log(this.province);
       this.provinceJson.forEach((element) => {
-        if (element.name == this.province) {
+        if (
+          (!this.defaultAddr.name &&
+            element.code == this.defaultAddr.province_code) ||
+          (!this.defaultAddr.code && element.name == this.defaultAddr.province)
+        ) {
           this.cityJson = element.children;
           this.areaJson = [];
+
+          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 = "";
+          }
         }
       });
     },
     // 选择市
-    checkCity(e, a) {
+    checkCity() {
-      console.log(e, a);
-      console.log(this.city);
       this.cityJson.forEach((element) => {
-        if (element.name == this.city) {
+        if (
+          (!this.defaultAddr.name &&
+            element.code == this.defaultAddr.city_code) ||
+          (!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.$emit("input", this.defaultAddr);
+        }
+      });
+    },
+    // 选择区县
+    checkArea() {
+      console.log(this.area_code);
+      this.areaJson.forEach((element) => {
+        if (
+          (!this.defaultAddr.name &&
+            element.code == this.defaultAddr.area_code) ||
+          (!this.defaultAddr.code && element.name == this.defaultAddr.area)
+        ) {
+          this.defaultAddr.area_code = element.code;
+          this.defaultAddr.area = element.name;
+          this.$emit("input", this.defaultAddr);
         }
       });
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+@import url(https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/select.css);
+@import url(https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/option.css);
+@import url(https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/icon.css);
+
+.distpicker-address-wrapper {
+  color: #9caebf;
+  select {
+    padding: 0.5rem 0.75rem;
+    height: 40px;
+    font-size: 1rem;
+    line-height: 1.25;
+    color: #464a4c;
+    background-color: #fff;
+    background-image: none;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    -webkit-transition: border-color ease-in-out 0.15s,
+      -webkit-box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s,
+      -webkit-box-shadow ease-in-out 0.15s;
+    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
+      -webkit-box-shadow ease-in-out 0.15s;
+
+    option {
+      font-weight: normal;
+      display: block;
+      white-space: pre;
+      min-height: 1.2em;
+      padding: 0px 2px 1px;
+    }
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      list-style: none;
+    }
+  }
+  .address-header {
+    background-color: #fff;
+
+    ul {
+      display: flex;
+      justify-content: space-around;
+      align-items: stretch;
+
+      li {
+        display: inline-block;
+        padding: 10px 10px 7px;
+
+        &.active {
+          border-bottom: #52697f solid 3px;
+          color: #52697f;
+        }
+      }
+    }
+  }
+  .address-container {
+    background-color: #fff;
+
+    ul {
+      height: 100%;
+      overflow: auto;
+
+      li {
+        padding: 8px 10px;
+        border-top: 1px solid #f6f6f6;
+
+        &.active {
+          color: #52697f;
+        }
+      }
+    }
+  }
+}
+.disabled-color {
+  background: #f8f8f8;
+}
+</style>

src/index.js

@@ -1,5 +1,15 @@
+// import 'element-ui/lib/theme-chalk/select.css'
+// import 'element-ui/lib/theme-chalk/option.css'
+import Vue from 'vue'
+import { Select, Option } from 'element-ui'
+
+Vue.use(Select)
+Vue.use(Option)
+
+
 import VDistpicker from './Distpicker'
 import AddressParse from './lib/address-parse'
 import AddressJson from './lib/address-json'
+// import { Select } from 'element-ui'
 
 export default { VDistpicker, AddressParse, AddressJson }

src/lib/address-parse.js

@@ -251,6 +251,7 @@ const parseRegionWithRegexp = (fragment, hasParseResult) => {
     }
 
     if (area.length === 0) {
+        console.log(fragment)
         for (let i = 1; i < fragment.length; i++) {
             const str = fragment.substring(0, i + 1)
             const regexArea = new RegExp(`\{\"code\":\"[0-9]{1,9}\",\"name\":\"${str}[\u4E00-\u9FA5]*?\",\"cityCode\":\"${city[0] ? city[0].code : '[0-9]{1,6}'}\",\"provinceCode\":\"${province[0] ? `${province[0].code}` : '[0-9]{1,6}'}\"\}`, 'g')
@@ -277,6 +278,7 @@ const parseRegionWithRegexp = (fragment, hasParseResult) => {
             if (city.length === 0) {
                 const regexCity = new RegExp(`\{\"code\":\"${cityCode}\",\"name\":\"[\u4E00-\u9FA5]+?\",\"provinceCode\":\"${provinceCode}\"\}`, 'g')
                 const matchCity = cityString.match(regexCity)
+                console.log(matchCity)
                 city.push(JSON.parse(matchCity[0]))
             }
         }