Git Product home page Git Product logo

v-region's Introduction

CircleCI code coverage npm version JavaScript Style Guide npm download

简洁强大的**行政区划选择器,可选择 “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4 级行政区域 A simple region cascade selector for vue, provide 4 levels Chinese administrative division data

行政区划数据源更新日期:2022年05月18日

如果你的项目正在使用 vue 2.x 版本,请使用 v-region 2.x 版本

文档与实例(Documentation and Examples)

更多的文档与实例请浏览(Explorer on)

功能特性(Features)

  • “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4 级行政区域选择
  • 丰富的使用形式,提供了
    • 下拉列表级联模式 RegionSelects
    • 分组模式 RegionGroup
    • 多列竖排模式 RegionColumns
    • 城市选择器模式 RegionCityPicker
    • 纯文本模式 RegionText
  • 分组 Group 与多列 Columns 模式可直接使用核心模块 RegionGroupCore 与 RegionColumnsCore,结合其他交互形式可自由组合更多种多样的使用形式,例如结合抽屉 Drawer、气泡 Popover 或对话框 Dialog 使用
  • 部分模式允许使用作用域插槽 Scoped Slots 的方式自定义触发对象,让组件更方便于整合在业务场景中
  • 除省级以外,其它行政区域级别可通过参数进行切换
  • 支持 “直辖市”、“特别行政区” 、“地级市(直筒子市)” 和 “省辖县/省辖县级市” 等特殊行政区域的数据和内容处理

安装插件(Installation)

https://nodei.co/npm/v-region.png?downloads=true&downloadRank=true&stars=true

# npm
npm i v-region
# yarn
yarn add v-region
# pnpm
pnpm add v-region

在项目里全局安装所有功能模块

import { createApp } from 'vue'
import App from './app.vue'
import Region from 'v-region'
// 全局安装以下模块
// RegionGroup
// RegionSelects
// RegionColumns
// RegionCityPicker
// RegionText
const app = createApp(App)
app.use(Region)
app.mount('#app')

自定义全局安装模块

import { RegionSelects } from 'v-region'

const app = createApp(App)
app.component('v-region-selects', RegionSelects)

在页面中使用(Usage)

<template>
  <RegionSelects
    v-model="region"
    @change="change"
  />
</template>

<script setup>
import { ref } from 'vue'
import { RegionSelects } from 'v-region'

const region = ref({
  province: '350000',
  city: '350100',
  area: '350104',
  town: '350104008'
})
function change (data) {
  console.log(data)
}
</script>

使用 TypeScript

import { ref } from 'vue'
import { RegionSelects } from 'v-region'
import type { RegionInputModel, RegionModel } from 'v-region'

const region = ref<RegionInputModel>({
  province: '350000',
  city: '350100',
  area: '350104',
  town: '350104008'
})
function change (data: RegionModel): void {
  console.log(data)
}

License

FOSSA Status

Star数趋势(Stargazers over time)

Stargazers over time

数据源(Data Source)

Region data come from repo: mumuy/data_location

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

v-region's People

Contributors

fossabot avatar terryz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

v-region's Issues

如何自定义样式?

在引入该组件后,无法自定义样式,例如选择器的高度,字体大小等等。并且通过设置
<v-region
@values="selectLogs"
class="xxxxxx"
/>

也无法重置样式。

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" />

v-region.js 有 1.3M,太大了

v-region.js 有 1.3M,太大了,在项目里只是地址选择功能就引入这么大一个 js 文件,会被领导砍的啊。

help

如何用行政编码拿到对应行政单位名称

项目如何启动

clone到本地,install之后,npm run dev启动服务,在浏览器中打开一直报404,麻烦问一下,项目在本地如何跑起来?

下拉列表的层级

你好,点击下拉后,省市区选择框的 z-index 无法设置吗?
我用的dialog,点击选择后,省市区在dialog的下面,无法选择。

有面板收起事件吗

我用的RegionGroup,用户点击每一级行政区都会产生一个 change 事件,而且用户可以选择任意级别行政区。我们希望在用户完成他的选择之后(面板收起)再进行动作而不是 每次change 都执行,查看文档没找到对应的事件消息,请指教,多谢!

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

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

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

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

不能自定义省市数据

省市数据要根据政府网站最新数据更新,下载了2020年的政府公布的,有些信息跟当前打包的内容不对称

山东省济南市下缺少高新区选项

控件在使用时,没有山东省济南市下的高新区及其下面的街道信息数据;
但是,在搜索js时,在里面可以找到高新区下的街道数据;

撤销莱芜市

由于莱芜市已并入济南市,希望更新插件!!

如果两次重新赋值: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>

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

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

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

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

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

{
    "province": {
        "key": "340000",
        "value": "安徽省"
    },
    "city": {
        "key": "340500",
        "value": "马鞍山市"
    },
    "town": {
        "key": "210224102",
        "value": "广鹿岛镇"
    }
}

搜索不够智能

目前搜索只能搜索当前区块的数据,不能全局搜索。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.