⚠️ DEPRECATED ⚠️

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

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

vue-region-picker

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

Supports both Vue 1.x and 2.0!

Demo

• Vue1.x
• Vue2.0

Requirements

• Vue ^1.0.12

Area data

• China china-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

name	description	Type	default Value
region	region data	Object	-

Props

name	description	Type	default Value
province	Bind province. You can set the initial value or not. Set the initial value by (number)code or (string)name.	Number, String
city	Bind city. You can set the initial value or not. Set the initial value by (number)code or (string)name.	Number, String
district	Bind district. You can set the initial value or not. Set the initial value by (number)code or (string)name.	Number, String
placeholder	Placeholder	Object	{ province: '请选择', city: '请选择', district: '请选择'}
auto	If empty option will automatically hide.	Boolean	false
required	Required if the option is not empty.	Boolean	false
completed	Allow the return value is complete, it contains an array of code(number) and name(string). e.g. { "district": [ 440105, "海珠区" ], "city": [ 440100, "广州市" ], "province": [ 440000, "广东省" ] }	Boolean	false
disabled	disabled	Boolean	false
two-select	If true, display only province and city	Boolean	false
onchange	selected callback	Function

Slots

name	description
province	province label
city	city label
district	district 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