V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Terry05
V2EX  ›  分享创造

v-region - 基于 Vue2 的中国行政区划选择器(4 级联动城市选择器)

  •  
  •   Terry05 ·
    TerryZ · 2019-10-15 10:11:37 +08:00 · 3055 次点击
    这是一个创建于 1626 天前的主题,其中的信息可能已经有所发展或是发生改变。

    v-region v2.2.2 版本更新内容:

    • 使用 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 版本

    插件简介

    v-region

    基于 Vue2 的简洁易用的中国行政区划选择器,4 级联动城市选择器。

    包含以下几种使用模式:

    • 常规表单下拉元素模式( Select )
    • 多分组切换( Group )
    • 多列竖排模式( Column )
    • 纯文本展示模式( Text )
    • 专用城市选择模式( City )

    实例和文档

    可在 CodePen 上快速预览,更多的实例和文档请浏览以下的站点

    v-region

    7 条回复    2019-10-18 00:22:00 +08:00
    jorneyr
        1
    jorneyr  
       2019-10-15 13:11:35 +08:00
    建议地址数据由服务器异步提供,否则光地址选择组件就几 M 大小,加载都需要好多时间,一般项目都不敢用。
    Terry05
        2
    Terry05  
    OP
       2019-10-15 13:56:16 +08:00
    @jorneyr 是的,“省、市、区” 三级的数据不过 81K,增加到第四级 “乡 /镇 /街道”,数据量就上来了

    但是,如果数据是来自于服务端,插件使用的复杂度就上来了,所以目前只能先这样
    coolooks
        3
    coolooks  
       2019-10-16 09:10:26 +08:00
    感谢,一直在用,希望省市区数据更新一下
    Terry05
        4
    Terry05  
    OP
       2019-10-16 11:31:34 +08:00
    @coolooks 嗯,功能更新后,就会更新数据的
    netnr
        5
    netnr  
       2019-10-17 13:52:59 +08:00
    @Terry05 5 级数据支撑,CDN,来吧,https://ss.netnr.com/zoning
    Terry05
        6
    Terry05  
    OP
       2019-10-17 14:11:21 +08:00
    @netnr 厉害了!
    jirocat
        7
    jirocat  
       2019-10-18 00:22:00 +08:00 via Android
    mark 一下 说不定以后能用上
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5475 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:06 · PVG 17:06 · LAX 02:06 · JFK 05:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.