四级地址选择器

安装

npm i vue-next-address-picker

使用

    <template>
        <vue-next-address-picker  
                :visible="showPickerRef"
                @choice="choiceAddress"
                @close="showPickerRef=false"
                :pickerLevel="4"
                >
        </vue-next-address-picker>
    </template>
    <script>
        import VueNextAddressPicker from "vue-next-address-picker"
        import {ref,defineComponent} from "vue"
        export default defineComponent({
            components:{
                VueNextAddressPicker
            },
            setup(){
                const showPickerRef = ref(false);
                const choiceAddress = data=>{
                    const {province,city,area,street} = data.province;
                    console.log(data)
                }
                return {
                    showPickerRef,
                    choiceAddress
                }
            }
        })

    </script>

效果

属性

| 属性名 | 属性值 | 说明 | | :---: | :---: | :---: | | borderColor | string | 边框颜色,默认#f1f2f6 | | highlightBg | string | 高亮背景色，默认#f40 | | width | string | 宽度，默认100% | | height| string | 高度,默认300px| | visible | boolean | 是否显示组件 | | pickerLevel | number | 级联级别 1~4 |

事件

| 事件名 | 说明 | 参数 | | :---: | :--:| :--: | | close | 组件隐藏时触发 | - | | choice | 级联选择完成触发 | 地址信息:{province,area,city,street} |