更新记录

1.0.2(2020-03-17)

新增queryIndex自定义信息获取指定数据的索引。

1.根据label获取对应的index
    var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
    console.log(index);
    this.cityPickerValueDefault = index.index;
    this.$refs.simpleAddress.open();
2.根据value获取对应的index
    var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
    console.log(index);
    this.cityPickerValueDefault = index.index;
    this.$refs.simpleAddress.open();

1.0.1(2019-12-11)

修复HX2.4.6.20191210 报错

查看更多

适用于uniapp的三级地址联动(支持APP、小程序、H5)

目前已测试 安卓、微信小程序、H5 (其它端口未测试)

该插件参考了:mpvue-picker 所以基础用法和 mpvue-picker基本一样

开发组件不易。如有BUG请联系作者QQ:615773740,拒绝一切差评(如果联系作者不给你解决可以差评)

建议大家使用HX2.4.5.20191209+ 测试,另外不排除 HX版本更新导致其它奇葩BUG,有问题及时反馈!

==================== 奇葩问题说明 ====================

有一些奇葩的用法导致一些奇葩的问题。

1. 有些在app.vue里面加一些全局css,比如pageview的样式全部重置掉,这种方法是不可取的,就算不用本组件 也不建议这样。

2. 有些喜欢把组件放在某个子组件子view下,这也是不可取的,这种可能导致打开后样式异常,建议放在最外面的view下面,组件不要被其它view组件包含

正确使用应该如下
<view class="content">
        <view></view>
        <view></view>
        <view></view>
        <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
    </view>

3. 如果有调用ref.open 报undefined 的 看一下自己是不是写在了v-if子view里面

==================== 代码举例 ====================

代码示例

1.模版部分

    <view class="content">
        <button class="btns" type="primary" @tap="openAddres">默认打开地址</button>

        <button class="btns" type="default" @tap="openAddres2">自定义:根据省市区名称打开地址</button>

        <button class="btns" type="warn" @tap="openAddres3">自定义:根据省市区“code”打开地址</button>
        <textarea v-model="pickerText" cols="30" rows="10"></textarea>
        <!--
         mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色
         -->
        <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
    </view>

2.JS代码部分

import simpleAddress from '@/components/simple-address/simple-address.nvue';
export default {
    data() {
        return {
            cityPickerValueDefault: [0, 0, 1],
            pickerText: ''
        };
    },
    components: {
        simpleAddress
    },
    methods: {
        openAddres() {
            this.cityPickerValueDefault = [0,0,1]
            this.$refs.simpleAddress.open();
        },
        openAddres2() {
            // 根据 label 获取
            var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
            console.log(index);
            this.cityPickerValueDefault = index.index;
            this.$refs.simpleAddress.open();
        },
        openAddres3() {
            // 根据value 获取
            var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
            console.log(index);
            this.cityPickerValueDefault = index.index;
            this.$refs.simpleAddress.open();
        },
        onConfirm(e) {
            this.pickerText = JSON.stringify(e);
        }
    }
};

==================== 参数方法用法 ====================

属性说明

属性名 类型 默认值 说明
animation Boolean true 是否开启打开窗口动画
type String bottom 打开弹窗位置:bottom:底部弹出层;后续扩展其它
maskClick Boolean true 是否开启遮罩层,false则不开启
maskBgColor String rgba(0, 0, 0, 0.4) 遮罩层背景颜色
themeColor String 按钮主题颜色
pickerValueDefault Array [] 地址默认选中值

事件说明

事件名称 说明
onChange 监听picker-viewchange事件
onCancel 监听取消按钮点击
onConfirm 监听确定按钮点击
事件中返回参数说明:
参数名称 说明
label 省-市-区
value 获得选中地址区域的index索引
cityCode 城市编码
areaCode 区域编码
provinceCode 省份编码

方法说明

方法名 类型 说明
open function 弹出地址选择组件,通过 ref 触发
queryIndex function 自定义信息返回对应的index,方便设置默认值

queryIndex方法使用例子

1.根据label获取对应的index
    var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
    console.log(index);
    this.cityPickerValueDefault = index.index;
    this.$refs.simpleAddress.open();
2.根据value获取对应的index
    var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
    console.log(index);
    this.cityPickerValueDefault = index.index;
    this.$refs.simpleAddress.open();
queryIndex方法返回参数如下
参数名称 说明
index 获得的 省-市-区 索引
data 获得设置的自定义信息返回的对应数据的item,我感觉没啥鸟用

隐私、权限及商业化声明

说明:除收费原生SDK插件外,其他插件或示例工程默认均为MIT开源协议。如提供了github地址,并在github上专门标注了开源协议,则以github标注为准。

1. 本插件需要申请的手机端权限列表:

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

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

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