Nasal Piercings Manipulator

    This package has been deprecated

    Author message:

    deprecated

    vue-region-picker

    3.0.1 • Public • Published

    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

    <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: ''
        }
      }
    })

    Or

    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>

    Development

    $ npm i cooking -g
    $ npm run dev

    Testing and Building

    $ npm test
    $ npm run dist

    License

    WTFPL

    Install

    npm i vue-region-picker

    DownloadsWeekly Downloads

    51

    Version

    3.0.1

    License

    WTFPL

    Last publish

    Collaborators

    • qingwei.li