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

Name	Type	Default	Options	Description
v-model	Array	[]		value
layoutDir	String	horizontal	horizontal, vertical
labelShow	Boolean	true		show label or not
labelWidth	String	50px
labelAlign	String	right	left, center, right
requestList	Array			the request list
responseKey	String	''		key of the data in response
keyMapList	Array	[['id', 'name'], [...], [...]]		it`s hard to descripe in English... （select 的 option 需要 key 和 value，默认 key 是 id，value 是 name。 如果您的接口返回值地址数据与默认不同，请参考返回值进行配置。 如：[['provinceId', 'provinceName'], ['cityId', 'cityName'], ['areaId', 'areaName']]）

Methods

Name	Description	e.g.
getValue	return value like ['150000', '150200', '150203' ]	this.$refs['regionSelector'].getValue()
setValue		this.$refs['regionSelector'].setValue( [ '150000', '150200', '150203' ] )

Events

Name	Description	e.g.
/	/	/

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