vrp

vue-region-picker

[DEPRECATED]

Showing:

Popularity

Downloads/wk

2

GitHub Stars

159

Maintenance

Last Commit

4yrs ago

Contributors

4

Package

Dependencies

0

License

WTFPL

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
deprecated

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial