:sparkles: A flexible, highly available district picker for picking provinces, cities and districts of China.

Overview

Powered By Jiajian Chan

A flexible, highly available district selector for picking provinces, cities and districts of China.

V - Distpicker

Here is documents

Installation

npm install v-distpicker --save

Or

yarn add v-distpicker --save

Usage

Register component

Registe global component:

import Distpicker from 'v-distpicker'

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

Registe component:

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

How to use

Basic:

<v-distpicker></v-distpicker>

Default Value:

<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

Mobile:

<v-distpicker type="mobile"></v-distpicker>

Contributors

Thanks

License

The plugin is open-sourced software licensed under the MIT license.

Comments
  • 报错(error)

    报错(error)

    Uncaught Error: Module build failed: Error: Missing binding /Users/jian/Sites/distpicker/node_modules/node-sass/vendor/darwin-x64-64/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x

    Found bindings for the following environments:

    • OS X 64-bit with Node.js 9.x

    This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass --force to build the binding for your current environment.

    出现如上报错信息,请问可以怎么解决?(How to solve these problems)

    opened by lingangle 8
  • 给默认值为“上海市”时,显示出错,区级没有正确显示出来。

    给默认值为“上海市”时,显示出错,区级没有正确显示出来。

    给默认值为“上海市”时,显示出错,区级没有正确显示出来。

    <v-distpicker
        province="上海市"
        city="市辖区"
        area="长宁区">
    </v-distpicker>
    

    页面上区级(area)呈现为空白,请问这是bug吗?该怎样解决?

    bug 
    opened by GodStream 8
  • 初始值设置能否使用使用code来指定

    初始值设置能否使用使用code来指定

    需求:

    1. 由于我们数据表实际保存的是最后一个字段 area 的 code, 比如: 110118(密云区), 而不是分别存'省/市/区', (因为 110118 就能唯一确定 '省/市/区' 三级了) 那么在下次装载时, 能否在控件初始化时就使用 <v-distpicker area-code="110118"></v-distpicker> 就把'北京市 - 北京城区 - 密云区'自动选择好? 目前的必须用具体'省/市/区'名字指定初始值, 没法满足上面需求。
    2. 能否开放一个方法 getDistObject(areaCode) 从代码获取具体三级 '省/市/区'? 输入: areaCode (地区编码) 输出: {province, city, area} 的具体名称和code

    组件写的很好, 感谢!

    小提醒: 说明文档 https://distpicker.pigjian.com/ 尾部 Methods 方法 列出现两个 city(有一个应该 area)

    feature 
    opened by flight9 6
  • 县级市选择后报错“Cannot read property 'length' of null

    县级市选择后报错“Cannot read property 'length' of null"”

    当选择湖北省仙桃市时,因为县级市没有区县,会出现如下错误 Error in render: "TypeError: Cannot read property 'length' of null" 好像将下面的代码: getDistricts(code = DEFAULT_CODE) { return DISTRICTS[code] || null }, 改为: getDistricts(code = DEFAULT_CODE) { return DISTRICTS[code] || [] }, 即可,望作者在源码中修复这个错误!

    opened by zhang90030 6
  • 如何与async-validator组合使用

    如何与async-validator组合使用

    opened by CracKerMe 4
Releases(v2.0.8)
Owner
Jiajian Chan
⛵️ Nothing is impossible.
Jiajian Chan
Matteo Bruni 4.6k Dec 30, 2022
Vue-simple-file-picker: a vue package for files picking and uploading

Vue-simple-file-picker is a vuejs component that allows you to retrieve images (url and base64) from the user.

null 1 Jul 29, 2021
Application that provides weather information of provinces with Vue.js / Weather info in Turkey with Vue.js

# weather_app ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for

Deniz Sultanoğlu 16 Jun 6, 2022
Check Browser Edge Reactively:sparkles:

vue-edge-check English / 中文 Check Browser Edge Reactively.To prevent transition effect triggered oddly when swipe edge with vue-router ✨ Before After

顾凡 31 Sep 14, 2022
Check Browser Edge Reactively:sparkles:

vue-edge-check English / 中文 Check Browser Edge Reactively.To prevent transition effect triggered oddly when swipe edge with vue-router ✨ Before After

顾凡 31 Sep 14, 2022
:sparkles: Markdown files to ALIVE Vue components.

vue-md-loader Introduction Webpack loader for converting Markdown files to ALIVE Vue components. Configurable Markdown-It parser. Built-in syntax high

wxsm 111 Nov 20, 2022
The front-end of QP china web application

The front-end of QP china web application

Xuan 1 May 13, 2022
:art: Help the user picking beautiful colors!

Notice Vue Swatches recently reached version 2. If you were using v1 please consider reading the release notes or you can check v1 here Demo And Docum

Diego Jara 548 Jan 3, 2023
A component for picking date & time

A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.

Robin Boutros 0 Aug 4, 2021
Beekeeper Studio is a cross-platform SQL editor and database manager available for Linux, Mac, and Windows.

Modern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.

Beekeeper Studio 12.1k Dec 31, 2022
Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries.

Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries.

Make Lemonade 289 Dec 31, 2022
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

Vue2 Timepicker ?? Dead repo recharged ?? A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support. Demo You can see

Phoenix Wong 432 Dec 26, 2022
A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js

vue-mobiscroll A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js Support swipping up / down, mouse dragging up / down , m

茶布多先生 16 May 10, 2022
A dropdown time picker (hour|minute|second) for VueJs (1.x), with flexible time format support

A dropdown time picker (hour|minute|second) for VueJs (1.x), with flexible time format support

Phoenix Wong 28 Dec 16, 2020
Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book

This repository is no longer active, BUT you can still get access to the latest code We will leave this repostiory in read-only because a lot of Dan's

Server Side Up 300 Oct 18, 2022
Yukino lets you read manga or stream anime ad-free from multiple sources for free! Available for Windows, Linux, MacOS and Android.

Yukino lets you read manga or stream anime ad-free from multiple sources for free! Available for Windows, Linux, MacOS and Android.

ZYROUGE 203 Dec 19, 2022
Katanime - A collection of words from anime characters, available in two languages; Indonesian and English

katanime Adalah project yang mengumpulkan kata-kata karakter anime. Saat ini ter

Ricko Veriyanto 10 Nov 12, 2022
⚡️ Vue components based on the JUI chart available in Vue.js

vue-graph A vue component library based on the JUI charts available in vuejs. Installation NPM npm install --save vue-graph Browser Just download dist

JUI Framework 127 Oct 23, 2022
Vue components based on the JUI components available in Vue.js

vue-uix A vue component library based on the JUI components available in vuejs. Installation NPM npm install --save vue-uix Browser (Legacy) If you ar

JUI Framework 15 Feb 9, 2021
Free Online Courses In One Place - TELEUNI allows you to search a wide range of free online courses available on the Internet.

Free Online Courses In One Place - TELEUNI allows you to search a wide range of free online courses available on the Internet.

Risako 4 Jan 3, 2022