Vue-region-picker NPM

vue-region-picker

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

Supports both Vue 1.x and 2.0!

Demo

Requirements

Vue ^1.0.12

Area data

China china-area-data

Install

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

Usage

html

<body>
  <!-- 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>
</body>

javascript

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

Vue.use(RegionPicker, {
  region: REGION_DATA,
  vueVersion: 1 // or 2, default 1
})

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

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

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

RegionPicker.region = REGION_DATA
// RegionPicker.vueVersion = 1 // or 2, default 1

new Vue({
  el: 'body',

  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	-
vueVersion	vue version, 1 or 2	Number	1

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>