v_region_selector v0.0.5

v_region_selector by Saturnus

A region selector based on Vue2, Vuex and element UI

Install

npm i v_region_selector -S

Usage

Global Registration

import Vue from 'vue'
import store from 'vuex' // you must install vuex first

import RegionSelector from 'v_region_selector'
Vue.use(RegionSelector, { store })

Using the component

<region-selector
  ref="regionSelector"
  v-model="regionList"
  :requestList="requestList"
  responseKey="resultJson"
  :keyMapList="keyMapList"
/>

<script>
import request from '@/network' // axios

export default {
  data() {
    return {
      regionList: [
        // "110000", "110100", "110101" // default value
      ],
      keyMapList: [
        ['provinceId', 'provinceName'],
        ['cityId', 'cityName'],
        ['areaId', 'areaName']
      ]
    }
  },
  computed: {
    requestList: function (){
      const that = this
      const req_province = function() {
        return new Promise(resolve => {
          request.post(
            'commonApi/common/getProvince', // your request
            {} // parameter
          ).then(res => {
            resolve(res)
          })
        })
      }
      const req_city = function() {
        return new Promise(resolve => {
          request.post(
            'commonApi/common/getCity',
            {
              provinceId: that.regionList[0] // 请求的入参
            }
          ).then(res => {
            resolve(res)
          })
        })
      }
      const req_district = function() {
        return new Promise(resolve => {
          request.post(
            'commonApi/common/getArea',
            {
              cityId: that.regionList[1] // 请求的入参
            }
          ).then(res => {
            resolve(res)
          })
        })
      }
      return [
        req_province, // 获取 第一级别 地址 接口请求 promise
        req_city, // 获取 第二级别 地址 接口请求 promise
        req_district // 获取 第三级别 地址 接口请求 promise
      ]
    }
  },
  methods: {
    getVal: function () {
      // console.info(this.$refs['regionSelector'].getValue()) // bad
      console.info(this.regionList) // good
    },
    setVal: function () {
      // this.$refs['regionSelector'].setValue([ '150000', '150200', '150203' ]) // bad
      this.regionList = [ '150000', '150200', '150203' ] // good
    },
    reset: function () {
      // this.$refs['regionSelector'].setValue([ '', '', '' ]) // bad
      this.regionList = [] // good
    }
  }
}
</script>

Props

Methods

Events

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build

License

MIT