A simple region cascade selector, provide 4 levels Chinese administrative division data

Overview

v-region

circle ci code coverage npm version npm download JavaScript Style Guide

简洁强大的中国行政区划选择器,可选择 “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4 级行政区域

A simple region cascade selector for Vue2, provide 4 levels Chinese administrative division data

实例和文档(Examples and Documentation)

请浏览(Explorer on)

要求 Vuejs 版本 2.6.0+

功能特性(Featues)

  • 支持 “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4级行政区域选择
  • 传统表单多下拉列表(Select)多级联动模式
  • 下拉选择器模式
  • 多列竖排模式选择器模式
  • 下拉选择器模式自带默认呼出按钮,并允许自定义呼出对象(Slot)
  • 纯文本显示模式(指定初始值后)
  • 除省级以外,其它行政区域级别允许通过参数进行“打开/关闭”
  • 完整解决 “直辖市”、“特别行政区” 、 “地级市(直筒子市)” 和 “省辖县/省辖县级市” 的数据和内容的处理

插件预览(Plugin preview)

  • 纯文本显示模式 (plain text view mode)

text

  • 表单元素模式(form element mode)

base

  • 下拉选择器模式(dropdown selector mode)

ui

  • 多列竖排选择器模式 (selector with column group)

column

  • 城市选择器模式 (city picker selector mode)

city-picker

安装插件(Installation)

npm i -S v-region

Include plugin in your main.js file.

import Vue from 'vue'
import vRegion from 'v-region';
Vue.use(vRegion, { global config options });

在页面中使用(Usage)

<template>
  <v-region @values="regionChange"></v-region>
</template>

<script>
export default {
  methods: {
    //receive selected region entries
    regionChange (data) {
      console.log(data)
    }
  }
}
</script>

License

FOSSA Status

Star数趋势(Stargazers over time)

Stargazers over time

数据源(Data Source)

Region data come from repo: mumuy/data_location

数据说明
省、市、区数据来自于民政局、国务院公告、国家统计局,确保及时更新和权威;
街道(镇、乡)数据由于数据庞大,各地各级之前公函较多,无法保证及时有效(最新数据2016年7月31日);
数据是以行政区为单位的行政区划数据。行政管理区与行政区存在重合,不予收录;
(行政管理区通常包含:***经济特区/经济开发区/高新区/新区/工业区;亦有部分行政管理区升为行政区,需加以区分)

依赖(Dependencies)

Vue 插件作品集(Vue plugin series)

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution
Comments
  • Error upon direct usage

    Error upon direct usage

    image

    Thanks for the library! But I just got an error message when I tried to use it in my project, if you can take a look that'll be helpful!

    I'm assuming that this error has something to do with the v-dropdown dependency, but I'm not sure at this point on how exactly to fix it, and this error message popped up after I imported the package and:

    import vRegion from 'v-region';
    
    Vue.use(vRegion);
    

    in the Vue file:

    <v-region :ui="true" />
    
    opened by CaliCastle 13
  • 请问有没有计划更新一下数据源

    请问有没有计划更新一下数据源

    之前在使用时,可以看到有“广东东莞441900”和“中山442000”的镇级数据与一般的9位不同是12位(最后有未删尽的000);但"新疆-喀什-巴楚县-三岔口镇" 却为653130103001,不是9为且不是没删最后000而是001.

    最近又看到有些区县下本来应该有镇级数据的,但实际是没有的,例如山东-济南-商丘,下面的没有镇级可选.

    之前选用此组件也是欣喜有4位级联.我简单了解应该只需要更新下数据源等少量操作即可改善.我看本项目已经14个月未更新了,所以请问是否有此计划?谢谢.

    opened by Sanotsu 2
  • 多级下拉选项全部完成后更换省份时县区和乡镇数据未清理并可选且返回错误数据

    多级下拉选项全部完成后更换省份时县区和乡镇数据未清理并可选且返回错误数据

    在第一次把下拉的四级选项全部选完后,变更省份级选项,发现乡镇级(第四级)选项还是上次的数据,并且这时候可以选择,返回的数据比如

    {
        "province": {
            "key": "340000",
            "value": "安徽省"
        },
        "town": {
            "key": "210224102",
            "value": "广鹿岛镇"
        }
    }
    

    广鹿岛镇 本来是辽宁省大连市长海县的,把省份改成安徽之后,直接选乡镇,可以选出以上错误结果。

    继续选择市(第二)级,第四级的数据依旧未更改,直接选第四级,依然可以选出如下错误结果

    {
        "province": {
            "key": "340000",
            "value": "安徽省"
        },
        "city": {
            "key": "340500",
            "value": "马鞍山市"
        },
        "town": {
            "key": "210224102",
            "value": "广鹿岛镇"
        }
    }
    
    opened by cnscoo 2
  • 如果两次重新赋值:seleced,则点击

    如果两次重新赋值:seleced,则点击"X"不能清除选择的

    如果单击两次"reset"按钮,则清除按钮“X”不能全部清除,测试代码如下:

     <template>
      <div id="app">
        <v-region :town="true" :ui="true"
                  @values="regionChange"
                  :selected="selected">
        </v-region>
        <el-button @click="changeSelected">reset</el-button>
      </div>
    </template>
    <script>
      import Vue from 'vue'
      import vRegion from 'v-region';
    
      Vue.use(vRegion);
    
      export default {
        data() {
          return {
            selected: {
              province: '350000',
              city: '350100',
              area: '350104',
              town: '350104008'
            },
          };
        },
        methods: {
          regionChange(d) {
            console.log(2, d);
          },
          changeSelected() {
            console.log(0, JSON.stringify(this.selected))
            this.selected = {
              province: '350000',
              city: '350100',
              area: '350104',
              town: '350104008',
            }
            console.log(1, this.selected)
          },
        }
      }
    </script>
    
    bug 
    opened by ANDYGE 1
  • Add license scan report and status

    Add license scan report and status

    Your FOSSA integration was successful! Attached in this PR is a badge and license report to track scan status in your README.

    Below are docs for integrating FOSSA license checks into your CI:

    opened by fossabot 1
  • 修复了 issue#6 中的问题

    修复了 issue#6 中的问题

    修复了#6 中描述的问题

    省/直辖市、市 https://terryz.gitee.io/vue/#/region/demo 实例里面的第二个,选择北京,无法选择第二级

    但先选一个其他省比如山西,然后再选一个城市,然后再选北京,就可以选北京的区了 希望一进来,就能实现这个效果

    判断changecCity()的时候条件是 if(!this.haveCity && this.area) this.changeCity(); 应该改为 if(!this.haveCity && this.city) this.changeCity(); 因为直辖市的区是显示在city这一级的 如果先选取其他省的城市再选到北京,nowCity就会由具体数值变成"",触发一次changeCity()

    opened by hcfw007 1
Releases(v2.3.0)
  • v2.3.0(May 19, 2022)

    更新日期:2022-05-18 更新内容:

    • 更新行政区划数据至 2022年05月18日
    • Text 模式增加文本分割符 prop separator,默认设置为空格
    • CityPicker 模式增加 overflow prop 用于设置选中多个城市的情况下,仅显示一定数量的城市,其他城市进行折叠,仅显示数量;默认值为 false
    • 统一修改 i18n prop 名为 language
    • 统一修改 values 数据响应事件为 change
    • 重构内部实现
    • 拆分五个模块为独立的模块进行应用
    • 增加省、市、区/县三级数据模型输出
    • 分组选择器(Group)的标题栏中移除 完成 图标按钮
    • 增加 RegionGroupCoreRegionColumnsCore 模块输出,可用于直接嵌入页面使用,而非默认的选择器形态,更可以进一步进行二次封装使用
    • 更新部分风格样式
    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Oct 14, 2019)

    Changelog:

    • 使用 render 函数的方式完全重构插件
    • 重构样式设计,使得交互界面更加简洁、清晰
    • 移除 uitextcolumncity-picker prop 入参,改为使用 type prop 进行设置,默认值为 "select"
    • 移除 selected prop
    • 增加 v-model/value 支持
    • 增加自定义选择器呼出对象的作用域插槽(scoped slot)支持,输出 "region" 和 "show" 数据
    • 增加单元测试及代码测试覆盖率检测
    • 修改 css 预编译程序从 SCSSStylus
    • 使用 Javascript Standard 语法标准对项目进行格式化
    • 升级 v-dropdown 升级至 v2.1.1 版本
    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Nov 27, 2018)

    更新内容:

    • 修复 slot 内容子孙组件继承问题
    • 增加城市选择器模式,使用省份作为标题排头,城市作为列表展示,通过设置 city-picker 参数进行使用
    • 修复“省辖县 /省辖县级市”展示不正确的问题
    • 修复初始化并选中项目后,修改省级,“区 /县”、“乡 /镇 /街道”级别没有被清空的问题
    • 修复在选择项目后,点击 X 清空数据后,再次点击按钮,不会呼出菜单的问题
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Nov 20, 2018)

    更新内容:

    • 重构插件
    • 修复地级市(“直筒子市”)的“区/县”级别无数据的问题
    • 为直辖市、地级市(“直筒子市”)增加相应的虚拟级别数据
    • 增加 disabled 参数,允许禁用表单下拉选择元素模式下禁用选择项目
    • 增加行政区划选择器多列竖排模式,通过 column 进行使用
    • 增加选择器模式在选中项目后,自动出现 x 图标,允许清除已选择内容
    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Jun 21, 2018)

  • v1.6.0(Jun 20, 2018)

    • add selected region text output only mode, set "text" to true
    • fixed form element mode modify superior level, the lower level region unclear issues
    • fixed some typography and style issues
    • fixed some town/street data missing, the error info show in console issues
    Source code(tar.gz)
    Source code(zip)
A Simple Twemoji Selector.

SI-GRENOBLE INSTALL npm install si-grenoble SETUP SI-GRENOBLE は TailwindCSS のスタイルを利用していますが、スタイルを提供はしていません。 利用する場合は TailwindCSS をインストールし、 tailwind.conf

null 8 Jun 10, 2022
A simple vue drag selector component

Vue-Drag-Selector 基于Vue.js的框选组件 示例(Demo) View Demo 安装(install) npm i vue-drag-selector 引入(import) // main.js import VueDragSelector from "vue-drag-se

XuCat 40 Nov 1, 2022
A Vue 3 headless file selector component

vue3-file-selector A Vue 3 headless File Selector component. How to use This library includes a few headless components for a drag and drop supported

cyon GmbH 21 Jul 28, 2022
A Multiple Files Selector Built With Vue

File Selector Demo link https://flamboyant-hermann-ff1ae0.netlify.app/ Stack Vue 2 file selector can: select multiple files from different folders. op

null 0 Nov 5, 2021
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 72 Dec 17, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 38 Nov 24, 2022
Simple vue tag editor

Simple Vue Tag Editor ======================= Originally inspired a lot by https://github.com/hnakamur/vue.tag-editor.js The code written here is upon

Jihad Dzikri Waspada 8 Feb 14, 2020
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
SelectMenu for Vuejs, A simple, easier and highly customized menu solution

v-selectmenu SelectMenu for Vuejs, A simple, easier and highly customized menu solution Examples and Documentation Live Examples on CodePen, more exam

Terry Zeng 187 Dec 27, 2022
Simple input radio Vue.js component.

Simple input radio Vue.js component.

Odyzeo 0 Dec 22, 2021
administrative region cascader base on view-design

ar-cascader 基于view-design的行政区域级联组件(基于iviewArea中alCascader改良) administrative region cascader base on view-design install 安装 npm install ar-cascader

Ricky 1 Dec 31, 2021
a lovely component of cascade selector with vue.js

v-cascade A lovely component of cascade selector with vue.js (Support both of PC and Mobile) 中文文档 Introduction Demo Screenshot basic-selector remote-s

Zanyuyu 33 May 8, 2021
A simple SPA that leverages data from various domains to help people better inform themselves when deciding to purchase a property or move to a new region.

A simple SPA that leverages from data captured from different domains and provides tools to plot and visualize said that to aid people in making decisions on where to live.

Tarcio Saraiva 13 Sep 5, 2022
Vue.js based administrative interface

What is it? This is the last package you will ever need to build your custom dashboard or administrative panel. It includes: AdminLTE (only styles) Vu

Timofey 29 May 2, 2022
Easy to use vue wrapper around feather icons, inheriting color and size from css cascade

feather-icons-vue Easy to use vue wrapper around feather icons, inheriting color and size from css cascade. The whole deal about feather-icons-vue is

Afeez Awoyemi 0 Aug 1, 2020
VUE chinese-lunar date-picker component with festivals and solar terms

vue-jLunar-datePicker @JinWen Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms. Online demo enjoy the de

null 56 Oct 11, 2022
Chinese lunar calendar for Fullcalendar

vue-lunar-full-calendar Image and demo a vue component for lunar fullcalendar. Uses Moment.js for date operations. Increase the functions of Chinese l

hj 152 Aug 2, 2022
A region picker based on Vue and ElementUI

A region picker based on Vue and ElementUI

null 60 Apr 30, 2022
You can with this app get about of countries. And you can search any countries and get about. Or search by region/zone.

You can with this app get about of countries. And you can search any countries and get about. Or search by region/zone.

Muhammadamin 4 Sep 26, 2022
NFT Treasure Chest provide creators with multimedia data (files, pictures, audio, video) on-chain permanent storage and other core functions and services

NFT Treasure Chest NFT Treasure Chest provide creators with multimedia data (files, pictures, audio, video) on-chain permanent storage and other core

Linden 4 Sep 23, 2022