Home

Awesome

⚠️ DEPRECATED ⚠️

You Need https://github.com/ElementUI/region-picker

This code is very 💩, I do not want to maintain it. 👋

vue-region-picker

Build Status npm

A Vue.js Component for picking provinces, cities and districts of China.

Supports both Vue 1.x and 2.0!

Demo

Requirements

Area data

Install

$ npm install vue-region-picker china-area-data --save

Usage

html

<div id="#app">
  <!-- Vue1.x -->
  <region-picker
    :province.sync="province"
    :city.sync="city"
    :district.sync="district">
  </region-picker>
  <!-- Vue2 -->
  <region-picker
    :province="province"
    :city="city"
    :district="district"
    @onchange="change">
  </region-picker>
</div>

javascript

import Vue from 'vue'
import RegionPicker from 'vue-region-picker'
import REGION_DATA from 'china-area-data'

Vue.use(RegionPicker, {
  region: REGION_DATA
})

// Vue1.x
new Vue({
  el: '#app',

  data () {
    return {
      province: '广东', // you can set initial value or not.
      city: 440100, // by code or name.
      district: ''
    }
  }
})

Or

import Vue from 'vue'
import { RegionPicker } from 'vue-region-picker'
import REGION_DATA from 'china-area-data'

RegionPicker.region = REGION_DATA

new Vue({
  el: '#app',

  data () {
    return {
      province: '广东', // you can set initial value or not.
      city: 440100, // by code or name.
      district: ''
    }
  },

  components: { RegionPicker }
})

Options

namedescriptionTypedefault Value
regionregion dataObject-

Props

namedescriptionTypedefault Value
provinceBind province. You can set the initial value or not. Set the initial value by (number)code or (string)name.Number, String
cityBind city. You can set the initial value or not. Set the initial value by (number)code or (string)name.Number, String
districtBind district. You can set the initial value or not. Set the initial value by (number)code or (string)name.Number, String
placeholderPlaceholderObject{ province: '请选择', city: '请选择', district: '请选择'}
autoIf empty option will automatically hide.Booleanfalse
requiredRequired if the option is not empty.Booleanfalse
completedAllow the return value is complete, it contains an array of code(number) and name(string). e.g. { "district": [ 440105, "海珠区" ], "city": [ 440100, "广州市" ], "province": [ 440000, "广东省" ] }Booleanfalse
disableddisabledBooleanfalse
two-selectIf true, display only province and cityBooleanfalse
onchangeselected callbackFunction

Slots

namedescription
provinceprovince label
citycity label
districtdistrict label
<region-picker
  :province.sync="address.province"
  :city.sync="address.city"
  :district.sync="address.district">
  <span slot="province">省份</span>
  <span slot="city">城市</span>
  <span slot="district">地区</span>
</region-picker>

Development

$ npm run dev

Testing and Building

$ npm test
$ npm run dist

License

WTFPL