今天给小伙伴们分享一款超棒的Vue中国行政区划选择器组件VRegion。

8addd650275b827595bda085ae0ea676.png

v-region 基于vue.js构建的简洁、强大的“省/直辖市”-“市”-“区/县”-“乡/镇/街道”4级行政组件。包含常规表单下拉列表模式、UI下拉选择器模式和纯文本展示等模式。

d5fd3000fcae762ebf2721f1a71a57ad.gif

功能特性

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

安装

$ npm i v-region -S

使用插件

ca7a8866300d3b68fb3630b69750adf1.png
278fe24412269369fa7714bf27b5fa6f.png
bbf8f5cedcfd1a3de4b94dca3e5e4075.png
f924d875d6665b802034fc3e52a26480.png

so easy 真的挺不错，附上项目示例及地址

# 示例文档https://terryz.gitee.io/vue/#/region/demo# 仓库地址https://github.com/terryz/v-region

好了，就分享到这里吧。如果大家喜欢的话，请多多支持下哈！

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue