基于 Vue2 的中国行政区划选择器 v-region

MIT
JavaScript 查看源码»
跨平台
2018-06-11
TerryZ

v-region

基于 Vue2 的简洁、易用的中国行政区划选择器,包含常规表单下拉列表模式和UI下拉选择器模式;支持 “省/直辖市”-“市”-“区/县”-“乡/镇/街道”4级行政级别

实例、文档

插件预览

基础表单模式

选择器模式

安装插件

npm install v-region --save

在入口文件 main.js 中导入插件

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

在你的页面中使用(基础模式)

template code

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

script code

export default {
    methods:{
        //receive selected region data
        regionChange(data){
            console.log(data);
        }
    }
};

Data Source

region data com from repo: mumuy/data_location

的码云指数为
超过 的项目
加载中

评论(9)

想天软件奕潇
想天软件奕潇
收藏啦
TerryZ
TerryZ 软件作者

引用来自“HeXingLin1993”的评论

前端ui我使用的是layui,怎么调整它的css?
这是基于 Vue 的插件
HeXingLin1993
HeXingLin1993
前端ui我使用的是layui,怎么调整它的css?
Pig-man
Pig-man
mark
TerryZ
TerryZ 软件作者
007说的对,只是省/市/区县,数据只有78K,单单乡/镇/街道的数据就近2M,再往下一级数据量是很大的,也并没有这么多需求用到
007
007
精确到街道只有四万多条,精确到居委会的话,67万条
意简美
意简美
全部加载会不会有点大?
py2cn
py2cn
看起来很棒!
A
Alex97
有些市是县级市,比如义乌市

v-region 2.1.3 发布,增加城市选择专用模式

v-region v2.1.3 版本发布,更新内容: 修复 slot 内容子孙组件继承问题 增加城市选择器模式,使用省份作为标题排头,城市作为列表展示,通过设置 city-picker 参数进行使用 修复“省辖县 /省...

2018/11/27 10:21

v-region 2.0.0 发布,行政区划选择器(4 级联动城市选择)

v-region v2.0.0 版本发布,更新内容: 重构插件 修复地级市(“直筒子市”)的“区 /县”级别无数据的问题 为直辖市、地级市(“直筒子市”)增加相应的虚拟级别数据 增加 disabled 参数,允...

2018/11/19 10:21

v-region 1.8.1 发布,中国行政区划选择器(4级行政区域)

基于 Vue2 简洁易用的中国行政区划选择器 v-region 1.8.1 版本更新,更新内容: 增加 UI 选择器模式下呼出选择器的默认按钮 修复省 /直辖市切换时,城市显示不正确 修改 UI 选择器模式在选择...

2018/10/08 11:18

中国行政区划选择器 v-region 1.6.0,新增纯文本显示

基于Vue2简洁易用的中国行政区划选择器 v-region 1.6.0 版本更新,更新内容: 增加纯文本信息输出模式,设置 text 参数为 true 修复常规表单模式下修改上级区域,原下级区域还保留的问题 修复...

2018/06/21 09:55

v-region 1.5.0 发布,基于 Vue2 的中国行政区划选择器

基于Vue2简洁易用的中国行政区划选择器 v-region 1.5.0版本更新,更新内容: 增加选择器模式 修复初始化选中项目时,项目未选中的问题 增加选择器模式下,省份的排列顺序使用名称长度和编码进...

2018/06/13 10:19

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

分析函数

一、Oracle分析函数简介: 在日常的生产环境中,我们接触得比较多的是OLTP系统(即Online Transaction Process),这些系统的特点是具备实时要求,或者至少说对响应的时间多长有一定的要求;其...

2013/01/16 18:05
91
0
HBase–常用Shell操作篇

HBase为用户提供了一个Shell终端进行交互操作,通过“help get”命令可以获得帮助信息。 【查询相关】 1. 进入hbase shell console $HBASE_HOME/bin/hbase shell 2. 查看有哪些表 list 3. 查...

2016/07/21 17:05
18
0
extjs与struts开发的项目

步骤 1、导入extjs有关的目录文件 2、登录页面.jsp提交action后返回main.jsp页面 main.jsp页面中导入extjs需要的页面(ext-all.css\ext-all.js\ext-lang-zh_CN.js),接着导入所有自己用extjs框...

2016/08/02 17:29
6
0
emacs

1 emacs下复制粘贴是这样的。 1 移动鼠标或者选中文字然后,可以有两种方式: Alt+w  (复制) 或者  Ctrl+w  (剪切) 2 最后,移动到您想要这段文本结束的地方并按下  Ctrl+y  2 查找...

2013/01/14 15:17
54
0
The Emacs Commands set

Emacs tutorial 1. Common default Emacs key prefixs +-------+-----------------------------+ | C-c | Commands particular to | | | the current editing | | | mode. | +--------+-----...

2012/08/09 11:47
14
0
oracle 查看连接数

oracle 查看连接数

2014/07/09 10:29
5
0
The Emacs Commands set

Emacs tutorial 1. Common default Emacs key prefixs +-------+-----------------------------+ | C-c | Commands particular to | | | the current editing | | | mode. | +--------+-----...

2012/08/09 11:47
17
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部