V - Distpicker Example

V - Distpicker 是一个简单易用的地区选择器

A easy-to-use district selector component.

Getting Started

Installation

npm install v-distpicker --save

yarn add v-distpicker --save

Register global component

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker)

Register component

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

How to use

Base Usage

Base

{
  "province": "",
  "city": "",
  "area": ""
}

Show Code

ChangeValue

{
  "province": "省",
  "city": "市",
  "area": "区"
}

Show Code

Placeholders

{
  "province": "",
  "city": "",
  "area": ""
}

Show Code

Default Value

{
  "province": 440000,
  "city": "广州市",
  "area": "海珠区"
}

Show Code

Hide Area

{
  "province": "",
  "city": ""
}

Show Code

Only Province

{
  "province": ""
}

Show Code

Trigger Event

{
  "province": "",
  "city": "",
  "area": ""
}

Show Code

Reset Button

{
  "province": "",
  "city": "",
  "area": ""
}

Disabled Value

{
  "province": 440000,
  "city": "广州市",
  "area": "海珠区"
}

Custom Data Source

{
  "province": "省",
  "city": "市",
  "area": "区"
}

Show Code

Mobile Usage

Base

北京市
天津市
河北省
山西省
内蒙古自治区
辽宁省
吉林省
黑龙江省
上海市
江苏省
浙江省
安徽省
福建省
江西省
山东省
河南省
湖北省
湖南省
广东省
广西壮族自治区
海南省
重庆市
四川省
贵州省
云南省
西藏自治区
陕西省
甘肃省
青海省
宁夏回族自治区
新疆维吾尔自治区
台湾省
香港特别行政区
澳门特别行政区
海外

{
  "province": "",
  "city": "",
  "area": ""
}

Show Code

Placeholders

北京市
天津市
河北省
山西省
内蒙古自治区
辽宁省
吉林省
黑龙江省
上海市
江苏省
浙江省
安徽省
福建省
江西省
山东省
河南省
湖北省
湖南省
广东省
广西壮族自治区
海南省
重庆市
四川省
贵州省
云南省
西藏自治区
陕西省
甘肃省
青海省
宁夏回族自治区
新疆维吾尔自治区
台湾省
香港特别行政区
澳门特别行政区
海外

{
  "province": "",
  "city": "",
  "area": ""
}

Show Code

Default Value

广东省
广州市
海珠区

荔湾区
越秀区
海珠区
天河区
白云区
黄埔区
番禺区
花都区
南沙区
从化区
增城区

{
  "province": "广东省",
  "city": "广州市",
  "area": "海珠区"
}

Show Code

Hide Area

北京市
天津市
河北省
山西省
内蒙古自治区
辽宁省
吉林省
黑龙江省
上海市
江苏省
浙江省
安徽省
福建省
江西省
山东省
河南省
湖北省
湖南省
广东省
广西壮族自治区
海南省
重庆市
四川省
贵州省
云南省
西藏自治区
陕西省
甘肃省
青海省
宁夏回族自治区
新疆维吾尔自治区
台湾省
香港特别行政区
澳门特别行政区
海外

{
  "province": "",
  "city": ""
}

Show Code

Only Province

北京市
天津市
河北省
山西省
内蒙古自治区
辽宁省
吉林省
黑龙江省
上海市
江苏省
浙江省
安徽省
福建省
江西省
山东省
河南省
湖北省
湖南省
广东省
广西壮族自治区
海南省
重庆市
四川省
贵州省
云南省
西藏自治区
陕西省
甘肃省
青海省
宁夏回族自治区
新疆维吾尔自治区
台湾省
香港特别行政区
澳门特别行政区
海外

{
  "province": ""
}

Show Code

Trigger Event

北京市
天津市
河北省
山西省
内蒙古自治区
辽宁省
吉林省
黑龙江省
上海市
江苏省
浙江省
安徽省
福建省
江西省
山东省
河南省
湖北省
湖南省
广东省
广西壮族自治区
海南省
重庆市
四川省
贵州省
云南省
西藏自治区
陕西省
甘肃省
青海省
宁夏回族自治区
新疆维吾尔自治区
台湾省
香港特别行政区
澳门特别行政区
海外

{
  "province": "",
  "city": "",
  "area": ""
}

Show Code

Attributes

参数	说明	类型	可选值	默认值
province	省份（选填）	String	省份名	null
city	城市（选填）	String	城市名	null
area	地区（选填）	String	地区名	null
type	类型（选填，默认 select）	String	mobile	null
disabled	是否禁用（选填，默认 false，且 type='mobile' 时无效，当disabled=true时province-disabled、city-disabled、area-disabled均无效）	Boolean		false
province-disabled	是否禁用省（选填，默认 false，且 type='mobile' 时无效）	Boolean		false
city-disabled	是否禁用市（选填，默认 false，且 type='mobile' 时无效）	Boolean		false
area-disabled	是否禁用区、县（选填，默认 false，且 type='mobile' 时无效）	Boolean		false
hide-area	隐藏地区（选填）	Boolean		false
only-province	只显示省份（选填）	Boolean		false
static-placeholder	是否将占位符显示为已经选择的项（仅 type='mobile' 时有效）	Boolean		false
placeholders	占位符（选填）	Object	province, city, area	{ province: '省', city: '市', area: '区' }
wrapper	外层 Class（选填）	String	customize	address
province-source	自定义省级数据	Object
city-source	自定义市级数据	Object
area-source	自定义区级数据	Object
address-header	address-header 样式（选填，类型必须为 mobile）	String	customize	address-header
address-container	address-container 样式（选填，类型必须为 mobile）	String	customize	address-contaniner

Methods

方法	说明	参数
province	选择省份	返回省份的值
city	选择城市	返回城市的值
area	选择地区	返回地区的值
selected	选择最后一项时触发	返回省市区的值
change-province	改变时触发	返回省市区的值
change-city	改变时触发	返回省市区的值
change-area	改变时触发	返回省市区的值
change	改变最后一项时触发	返回省市区的值