This repository has been archived by the owner. It is now read-only.
Clone or download
Latest commit 66b6b6a Jun 13, 2017
Permalink
Failed to load latest commit information.
dist build 3.0.1 Sep 8, 2016
example Support Vue2.0 Jul 14, 2016
src 调整代码格式以符合lint Dec 15, 2016
test Support Vue2.0 Jul 14, 2016
.babelrc use cooking Jun 5, 2016
.eslintrc use cooking Jun 5, 2016
.gitignore fix script Jun 5, 2016
.travis.yml update ci Jul 14, 2016
LICENSE update license Dec 26, 2015
Makefile Support Vue2.0 Jul 14, 2016
README.md Create README.md Jun 13, 2017
cooking.conf.js Support Vue2.0 Jul 14, 2016
cooking.demo.js Support Vue2.0 Jul 14, 2016
package.json -> v3.0.1 Sep 8, 2016

README.md

⚠️ 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

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