更新记录

1.0.5(2025-01-15) 下载此版本

  • 取消网络加载数据。
  • 调整为本地分包加载策略,避免小程序卡顿以及因主包过大无法上传体验版。

1.0.4(2025-01-15) 下载此版本

  • 取消网络加载数据。
  • 调整为本地分包加载策略,避免小程序卡顿以及因主包过大无法上传体验版。

1.0.2(2025-01-13) 下载此版本

更新使用方法

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

city 地址联动

组件名:mo-city-group 代码块: mo-city-group

省市县区街道地区四级联动 理论上支持所有平台,可自行尝试

[使用文档]


属性:

|diyStyle                           |{}                     |外层自定义样式                                                    |
|province                           |String                 |默认省份全称                                                 |
|city                               |String                 |默认城市全称                                                 |
|area                               |String                 |默认县区全称                                                 |
|street                             |String                 |默认街道全称                                                 |
|keyName                            |String = [name]        |要显示的对象字段名                                              |
|isProvince                         |Boolean|true           |是否显示省份                                     |
|isCity                             |Boolean|true           |是否显示城市                                     |
|isArea                             |Boolean|true           |是否显示县区                                     |
|isStreet                           |Boolean|true           |是否显示街道                                     |
|isShowTip                          |Boolean|true           |是否显示选择省市县街道的选项                                     |
|provinceTitle                      |String = [全部省份]        |不选择省份时的文字,或显示选择省市县街道选项的提示文字(isShowTip=true时有效)
|cityTitle                          |String = [全部城市]        |不选择城市时的文字,或显示选择省市县街道选项的提示文字(isShowTip=true时有效)
|areaTitle                          |String = [全部县区]        |不选择县区时的文字,或显示选择省市县街道选项的提示文字(isShowTip=true时有效)
|streetTitle                        |String = [全部街道]        |不选择街道时的文字,或显示选择省市县街道选项的提示文字(isShowTip=true时有效)|

事件:
|provinceChange                     |Event|{code:0,name:'名称'}           |省份选择事件                                     |
|cityChange                         |Event|{code:0,name:'名称'}           |城市选择事件                                     |
|areaChange                         |Event|{code:0,name:'名称'}           |县区选择事件                                     |
|streetChange                       |Event|{code:0,name:'名称'}           |街道选择事件                                     |

[使用示例]


###注意事项
由于四级联动JS数据文件过大,小程序须在分包使用加载本组件,否则无法上传体验版。主包使用时,建议跳转到分包页面加载选择地址后,再返回给主包调用。

分包策略如下:
1、把uni_modules\mo-city-group目录下的components目录整体移到你的分包目录(多个分包要遵循ABCD...能依次访问并加载的策略,或将本自定义组件放于每个分包中);
2、pages.json文件中配置自动加载,如本组件的分包路径是pagesA/components/...
   则pages.json配置:
    "easycom": {
        "autoscan": true,
        "custom": {
            "^mo-(.*)": "@/pagesA/components/mo-$1/mo-$1.vue"  //此为本组件的自动加载路径
        }
    }
3、这时只需在分包模板文件中使用组件,无需导入组件,可自动加载分包中的本组件。

    <template>
    <view>
    <mo-city-group class="color-whites any-font-size-12"  dataUrl="http://127.0.0.1/comjs/city.js" 
                        :isProvince="true" :isCity="true" province="浙江省" city="台州市" 
                        @area-change="citygroupChangeSo($event,'area')" 
                        @street-change="citygroupChangeSo($event,'street')"
                        @province-change="citygroupChangeSo($event,'province')"
                        @city-change="citygroupChangeSo($event,'city')"></mo-city-group>
    </view>
    </template>
    <script>
    export default{
        methods:{
            citygroupChangeSo(event,type){
                console.log(event,type)
            }
        }
    }
    </script>

4、分包配置完后,记得删除uni_modules目录下的mo-city-group目录,避免小程序无法上传体验版本。

如使用过程中有任何问题,或者您对此组件有一些好的建议,欢迎联系微信:actioniing

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问