Address 地址选择

选择自定义地址

<div class="address-list init" @click="showAddress">
    <div class="titile">选择地址</div>
    <div class="choose">{{text1}}</div>
</div>

<nut-address 
    v-model="showPopup" 
    :province="province" 
    :city="city" 
    :country="country" 
    :town="town" 
    customAddressTitle="请选择所在地区"
    @onChange="onChange1" 
    @close="close1">
</nut-address>


<script>
export default {
  data() {
    return {
        showPopup:false,
        province:[{"id":1,"name":"北京"},{"id":2,"name":"广西"},{"id":3,"name":"江西"},{"id":4,"name":"四川"}], // 省
        city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
        country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
        town:[], // 镇 必传值：name
    }
  },
  methods: {
      showAddress(){
        this.showPopup = true 
      },
      onChange1(cal){
        // 判断下一个行政区列表的内容是否有值
        if(this[cal.next].length < 1){
          this.showPopup = false
        }
      },
      close1(val){
        this.text1 = val.data.addressStr 
      }
  }
}
</script>

选择已有地址

<div class="address-list other" @click="showAddressExist">
  <div class="titile">选择地址</div>
  <div class="choose">{{text2}}</div>
</div>

<nut-address 
  v-model="showPopupExist" 
  type="exist" 
  :existAddress="existAddress" 
  @onChange="onChange2" 
  @close="close2" 
  :isShowCustomAddress="false" 
  existAddressTitle="配送至"
  @selected="selected2">
</nut-address>


<script>
export default {
  data() {
    return {
        showPopupExist:false,
        existAddress:[
          {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
          {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
          {"id":3,"addressDetail":"发大水比 ","cityName":"放到","countyName":"广宁街道","provinceName":"钓鱼岛全区","selectedAddress":false,"townName":""},
          {"id":4,"addressDetail":"还是想吧百度吧 ","cityName":"研发","countyName":"八里庄街道","provinceName":"北京","selectedAddress":false,"townName":""},
        ],
        text2:'请选择地址',
    }
  },
  methods: {
      showAddressExist(){
        this.showPopupExist = true
      },

      onChange2(cal){
        console.log('change2',cal)
        if(this[cal.next].length < 1){
          this.showPopupOther = false
        }
      },
      
      close2(val){
        console.log(val)
        if(val.type == 'exist'){
          this.text2 = val.data.provinceName+val.data.cityName+val.data.countyName+val.data.townName+val.data.addressDetail
        }else{
          this.text2 = val.data.addressStr
        }
      },
      selected2(prevExistAdd,nowExistAdd,arr){
        console.log(prevExistAdd)
        console.log(nowExistAdd)
      },
  }
}
</script>

自定义图标

<div class="address-list other" @click="showCustomImg">
    <div class="titile">选择地址</div>
    <div class="choose">{{text3}}</div>
</div>

<nut-address 
  v-model="showPopupCustomImg" 
  type="exist" 
  :existAddress="existAddress" 
  @onChange="onChange3" 
  @close="close3" 
  :isShowCustomAddress="false" 
  @selected="selected3" 
  :defaultIcon="defaultIcon" 
  :selectedIcon='selectedIcon'>
</nut-address>


<script>
export default {
  data() {
    return {
        showPopupCustomImg:false,
        selectedIcon:require('../../assets/svg/checked.svg'),
        defaultIcon:require('../../assets/svg/unchecked.svg'),
        existAddress:[
          {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
          {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
          {"id":3,"addressDetail":"发大水比 ","cityName":"放到","countyName":"广宁街道","provinceName":"钓鱼岛全区","selectedAddress":false,"townName":""},
          {"id":4,"addressDetail":"还是想吧百度吧 ","cityName":"研发","countyName":"八里庄街道","provinceName":"北京","selectedAddress":false,"townName":""},
        ],
        tex3:'请选择地址',
    }
  },
  methods: {
      showCustomImg(){
        this.showPopupCustomImg = true
      },

      onChange3(cal){
        console.log('change2',cal)
        if(this[cal.next].length < 1){
          this.showPopupOther = false
        }
      },
      
      close3(val){
        console.log(val)
        if(val.type == 'exist'){
          this.text3 = val.data.provinceName+val.data.cityName+val.data.countyName+val.data.townName+val.data.addressDetail
        }else{
          this.text3 = val.data.addressStr
        }
      },
      selected3(prevExistAdd,nowExistAdd,arr){
        console.log(prevExistAdd)
        console.log(nowExistAdd)
      },
  }
}
</script>

自定义地址与已有地址切换

<div class="address-list other" @click="showAddressOther">
    <div class="titile">选择地址</div>
    <div class="choose">{{text2}}</div>
</div>
<nut-address 
    v-model="showPopupOther" 
    type="exist" 
    :existAddress="existAddress" 
    :province="province" 
    :city="city" 
    :country="country" 
    :town="town" 
    @onChange="onChange4" 
    @close="close4" 
    @selected="selected4">
</nut-address>

<script>
export default {
  data() {
    return {
      showPopupOther:false,
      existAddress:[
        {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
        {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
        {"id":3,"addressDetail":"发大水比 ","cityName":"放到","countyName":"广宁街道","provinceName":"钓鱼岛全区","selectedAddress":false,"townName":""},
        {"id":4,"addressDetail":"还是想吧百度吧 ","cityName":"研发","countyName":"八里庄街道","provinceName":"北京","selectedAddress":false,"townName":""},
      ], // 已有地址列表 必传值：provinceName、cityName、countyName、townName、addressDetail 、selectedAddress
      province:[{"id":1,"name":"北京"},{"id":2,"name":"广西"},{"id":3,"name":"江西"},{"id":4,"name":"四川"}], // 省
      city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
      country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
      town:[], // 镇 必传值：name
    };
  },
  methods: {
    showAddressOther(){
        this.showPopupOther = true
    },
    onChange4(cal){
        if(this[cal.next].length < 1){
          this.showPopupOther = false
        }
    },
    close4(val){
        if(val.type == 'exist'){
          this.text2 = val.data.provinceName+val.data.cityName+val.data.countyName+val.data.townName+val.data.addressDetail
        }else{
          this.text2 = val.data.addressStr
        }
    },
  
    selected4(prevExistAdd,nowExistAdd,arr){
      console.log(prevExistAdd)
      console.log(nowExistAdd)
    }
  }
}
</script>

API

字段	说明	类型	默认值
v-model	是否打开地址选择	String	''
type	地址选择类型 exist/custom	String	custom
province	省，每个省的对象中，必须有 name 字段	Array	[]
city	市，每个市的对象中，必须有 name 字段	Array	[]
country	县，每个县的对象中，必须有 name 字段	Array	[]
town	乡/镇，每个乡/镇的对象中，必须有 name 字段	Array	[]
existAddress	已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下）	Array	[]
defaultIcon	已有地址列表默认图标，type=‘exist’ 时生效	string	''
selectedIcon	已有地址列表选中图标，type=‘exist’ 时生效	string	''
isShowCustomAddress	是否可以切换自定义地址选择，type=‘exist’ 时生效	Boolean	true
customAddressTitle	自定义地址选择标题，type='custom' 时生效	string	'请选择所在地区'
existAddressTitle	已有地址标题，type=‘exist’ 时生效	string	'配送至'

provinceName 省的名字
cityName 市的名字
countyName 县的名字
townName 乡/镇的名字
addressDetail 具体地址
selectedAddress 字段用于判断当前地址列表的选中项。

Event

字段	说明	回调参数
onChange	自定义选择地址时，选择地区时触发	参考 onChange
selected	选择已有地址列表时触发	参考 selected
close	地址选择弹框关闭时触发	参考 close

onChange 回调参数

参数	说明	可能值
custom	当前点击的行政区域	province(省) / city(市) / country(县) / town(乡)
next	当前点击的行政区域的下一级	province(省) / city(市) / country(县) / town(乡)
value	当前点击的行政区域的值（返回传入的值）	{}

selected 回调参数

参数	说明	可能值
第一个参数（prevExistAdd）	选择前选中的地址	{}
第二个参数（nowExistAdd）	当前选中的地址	{}
第三个参数（arr）	选择完之后的已有地址列表（selectedAddress 值发生改变）	{}

close 回调参数

参数	说明	可能值
type	地址选择类型 exist/custom	exist/custom
data	选择地址的值,custom 时，addressStr 为选择的地址组合	{}

注：点击叉号或者点击遮罩层关闭地址选择，不会触发 close 事件。

doc.md 10 KB History Raw

Address 地址选择

选择自定义地址

选择已有地址

自定义图标

自定义地址与已有地址切换

API

Event

onChange 回调参数

selected 回调参数

close 回调参数

doc.md 10 KB

History Raw