更新记录

1.0.4（2020-04-20）

重要

插件扩展名由原来的simple-address.nvue改成 simple-address.vue 升级后 不影响在nvue中使用，如果是nvue中使用 引入方式和vue一样。

插件支持vue doc，写代码时可提示，在其它文件，使用组件的时候，弹出代码提示。，具体vue doc好处可参考：https://ask.dcloud.net.cn/article/35814

优化

1.新增 btnFontSize、fontSize、cancelColor、confirmColor参数。

2. 上个版本新增了 queryIndex方法

1.0.3（2020-04-01）

修复 queryIndex 返回数据错误BUG

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();

平台兼容性

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

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

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

开发组件不易。如有BUG请联系作者QQ：615773740，拒绝一切差评（如果联系作者不给你解决可以差评）

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

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

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

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

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里面,这种情况可以自行打印 this.$refs.ref 看下 是否undefined

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

代码示例

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.vue';
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);
        }
    }
};

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

属性说明

事件说明

事件中返回参数说明：

方法说明

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方法返回参数如下