addressPicker

功能描述

基于vue实现的弹出式地址三级联动选择器，用例参见 catchRedPacket.html

依赖的插件

./libs/vue.min.js  # vue文件
./libs/address.js  # 全国省市区数据

./addressPicker.css # 样式文件
./addressPicker.js  # 地址弹出组件

快速使用

引入以上插件文件

<link rel="stylesheet" type="text/css" href="./addressPicker.css" />
<script type="text/javascript" src="./libs/vue.min.js"></script>
<script type="text/javascript" src="./libs/address.js"></script>
<script type="text/javascript" src="./addressPicker.js"></script>

页面dom如下

<div id="app">
    <div class="addressEnd" @click="getAddress()">
        地区: {{addr}}
    </div>
    <address-picker ref="addressPicker"></address-picker>
</div>

点击"选择地区"会弹出选择器，选择完地址会在sendValueToParent方法里回调传入省市区数据

var app = new Vue({
    el: '#app',
    data:{
        addr: '请选择地区'
    },
    methods: {
        sendValueToParent: function(pro, cit, qu){
            console.log(pro, cit, qu);
            this.addr = pro + " " + cit + " " + qu;
        },
        getAddress: function() {
            this.$refs.addressPicker.getAddress();
        }
    }
})
是否仍需要帮助？ 请保持联络！
最后更新于 2024/07/22