Address组件

介绍

按需加载请加载对应依赖组件 Icon Popup

安装

  1. import { createApp } from 'vue';
  2. import { Address, Icon, Popup } from '@nutui/nutui';
  4. const app = createApp();
  5. app.use(Address);
  6. app.use(Icon);
  7. app.use(Popup);

代码演示

选择自定义地址

  1. <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
  2. <nut-address
  3.     v-model:visible="showPopup"
  4.     :province="province"
  5.     :city="city"
  6.     :country="country"
  7.     :town="town"
  8.     @change="onChange"
  9.     @close="close"
  10.     custom-address-title="请选择所在地区"
  11. ></nut-address>
  1. setup() {
  2.     const showPopup = ref(false);
  3.     const address = reactive({
  4.       province:[
  5.         { id: 1, name: '北京' },
  6.         { id: 2, name: '广西' },
  7.         { id: 3, name: '江西' },
  8.         { id: 4, name: '四川' }
  9.       ],
  10.       city:[
  11.         { id: 7, name: '朝阳区' },
  12.         { id: 8, name: '崇文区' },
  13.         { id: 9, name: '昌平区' },
  14.         { id: 6, name: '石景山区' }
  15.       ],
  16.       country:[
  17.         { id: 3, name: '八里庄街道' },
  18.         { id: 9, name: '北苑' },
  19.         { id: 4, name: '常营乡' }
  20.       ],
  21.       town:[]
  22.     })
  24.     const text = ref('请选择地址')
  26.     const showAddress = () => {
  27.       showPopup.value = !showPopup.value;
  28.     };
  30.     const onChange = (cal) => {
  31.       const name = address[cal.next]
  32.       if (name.value.length < 1) {
  33.         showPopup.value = false;
  34.       }
  35.     };
  36.     const close = val => {
  37.       console.log(val);
  38.       text.value = val.data.addressStr;
  39.     };
  41.     return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
  42. }

选择已有地址

  1. <nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
  2. <nut-address
  3.     v-model:visible="showPopupExist"
  4.     type="exist"
  5.     :exist-address="existAddress"
  6.     @close="close"
  7.     :is-show-custom-address="false"
  8.     @selected="selected"
  9.     exist-address-title="配送至"
  10. ></nut-address>
  1. setup() {
  2.     const showPopupExist = ref(false);
  3.     const existAddress = ref([
  4.       {
  5.         id: 1,
  6.         addressDetail: 'th ',
  7.         cityName: '石景山区',
  8.         countyName: '城区',
  9.         provinceName: '北京',
  10.         selectedAddress: true,
  11.         townName: ''
  12.       },{
  13.         id: 2,
  14.         addressDetail: '12_ ',
  15.         cityName: '电饭锅',
  16.         countyName: '扶绥县',
  17.         provinceName: '北京',
  18.         selectedAddress: false,
  19.         townName: ''
  20.       },{
  21.         id: 3,
  22.         addressDetail: '发大水比 ',
  23.         cityName: '放到',
  24.         countyName: '广宁街道',
  25.         provinceName: '钓鱼岛全区',
  26.         selectedAddress: false,
  27.         townName: ''
  28.       },{
  29.         id: 4,
  30.         addressDetail: '还是想吧百度吧 ',
  31.         cityName: '研发',
  32.         countyName: '八里庄街道',
  33.         provinceName: '北京',
  34.         selectedAddress: false,
  35.         townName: ''
  36.       }
  37.     ]);
  39.     const text = ref('请选择地址')
  41.     const showAddressExist = () => {
  42.       showPopupExist.value = true;
  43.     };
  45.     const close = val => {
  46.       if (val.type == 'exist') {
  47.         const {provinceName,cityName,countyName,townName,addressDetail} = val.data
  48.         text.value = provinceName + cityName + countyName + townName + addressDetail;
  49.       } else {
  50.         text.value = val.data.addressStr;
  51.       }
  52.     };
  54.     const selected = (prevExistAdd, nowExistAdd, arr) => {
  55.       console.log(prevExistAdd);
  56.       console.log(nowExistAdd);
  57.     };
  59.     return { showPopupExist, existAddress, showAddressExist, text, close, selected };
  60. }

自定义图标

  1. <nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
  2. <nut-address
  3.     v-model:visible="showPopupCustomImg"
  4.     type="exist"
  5.     :existAddress="existAddress"
  6.     @close="close"
  7.     :is-show-custom-address="false"
  8.     @selected="selected3"
  9.     :default-icon="defaultIcon"
  10.     :selected-icon="selectedIcon"
  11.     :close-btn-icon="closeBtnIcon"
  12. ></nut-address>
  1. setup() {
  2.     const showPopupCustomImg = ref(false);
  3.     const icon = reactive({
  4.       selectedIcon: 'heart-fill',
  5.       defaultIcon: 'heart1',
  6.       closeBtnIcon: 'close',
  7.       backBtnIcon: 'left'
  8.     });
  9.     const existAddress = ref([
  10.       {
  11.         id: 1,
  12.         addressDetail: 'th ',
  13.         cityName: '石景山区',
  14.         countyName: '城区',
  15.         provinceName: '北京',
  16.         selectedAddress: true,
  17.         townName: ''
  18.       },{
  19.         id: 2,
  20.         addressDetail: '12_ ',
  21.         cityName: '电饭锅',
  22.         countyName: '扶绥县',
  23.         provinceName: '北京',
  24.         selectedAddress: false,
  25.         townName: ''
  26.       },{
  27.         id: 3,
  28.         addressDetail: '发大水比 ',
  29.         cityName: '放到',
  30.         countyName: '广宁街道',
  31.         provinceName: '钓鱼岛全区',
  32.         selectedAddress: false,
  33.         townName: ''
  34.       },{
  35.         id: 4,
  36.         addressDetail: '还是想吧百度吧 ',
  37.         cityName: '研发',
  38.         countyName: '八里庄街道',
  39.         provinceName: '北京',
  40.         selectedAddress: false,
  41.         townName: ''
  42.       }
  43.     ]);
  45.     const text = ref('请选择地址')
  47.     const showCustomImg = () => {
  48.       showPopupCustomImg.value = true;
  49.     };
  51.     const close = val => {
  52.       if (val.type == 'exist') {
  53.         const {provinceName,cityName,countyName,townName,addressDetail} = val.data
  54.         text.value = provinceName + cityName + countyName + townName + addressDetail;
  55.       } else {
  56.         text.value = val.data.addressStr;
  57.       }
  58.     };
  60.     const selected = (prevExistAdd, nowExistAdd, arr) => {
  61.       console.log(prevExistAdd);
  62.       console.log(nowExistAdd);
  63.     };
  65.     return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected, ...toRefs(icon) };
  66. }

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

  1. <nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
  2. <nut-address
  3.     v-model:visible="showPopupOther"
  4.     type="exist"
  5.     :exist-address="existAddress"
  6.     :province="province"
  7.     :city="city"
  8.     :country="country"
  9.     :town="town"
  10.     :back-btn-icon="backBtnIcon"
  11.     @close="close"
  12.     @selected="selected"
  13.     custom-and-exist-title="选择其他地址"
  14.     @switch-module="switchModule"
  15.     @close-mask="closeMask"
  16. ></nut-address>
  1. setup() {
  2.     const showPopupOther = ref(false);
  3.     const address = reactive({
  4.       province:[
  5.         { id: 1, name: '北京' },
  6.         { id: 2, name: '广西' },
  7.         { id: 3, name: '江西' },
  8.         { id: 4, name: '四川' }
  9.       ],
  10.       city:[
  11.         { id: 7, name: '朝阳区' },
  12.         { id: 8, name: '崇文区' },
  13.         { id: 9, name: '昌平区' },
  14.         { id: 6, name: '石景山区' }
  15.       ],
  16.       country:[
  17.         { id: 3, name: '八里庄街道' },
  18.         { id: 9, name: '北苑' },
  19.         { id: 4, name: '常营乡' }
  20.       ],
  21.       town:[]
  22.     })
  23.     const existAddress = ref([
  24.       {
  25.         id: 1,
  26.         addressDetail: 'th ',
  27.         cityName: '石景山区',
  28.         countyName: '城区',
  29.         provinceName: '北京',
  30.         selectedAddress: true,
  31.         townName: ''
  32.       },
  33.       {
  34.         id: 2,
  35.         addressDetail: '12_ ',
  36.         cityName: '电饭锅',
  37.         countyName: '扶绥县',
  38.         provinceName: '北京',
  39.         selectedAddress: false,
  40.         townName: ''
  41.       },
  42.       {
  43.         id: 3,
  44.         addressDetail: '发大水比 ',
  45.         cityName: '放到',
  46.         countyName: '广宁街道',
  47.         provinceName: '钓鱼岛全区',
  48.         selectedAddress: false,
  49.         townName: ''
  50.       },
  51.       {
  52.         id: 4,
  53.         addressDetail: '还是想吧百度吧 ',
  54.         cityName: '研发',
  55.         countyName: '八里庄街道',
  56.         provinceName: '北京',
  57.         selectedAddress: false,
  58.         townName: ''
  59.       }
  60.     ]);
  61.     const backBtnIcon = ref('left')
  62.     const text = ref('请选择地址')
  64.     const showAddressOther = () => {
  65.       showPopupOther.value = true;
  66.     };
  68.     const close = val => {
  69.       if (val.type == 'exist') {
  70.         const {provinceName,cityName,countyName,townName,addressDetail} = val.data
  71.         text.value = provinceName + cityName + countyName + townName + addressDetail;
  72.       } else {
  73.         text.value = val.data.addressStr;
  74.       }
  75.     };
  77.     const selected = (prevExistAdd, nowExistAdd, arr) => {
  78.       console.log(prevExistAdd);
  79.       console.log(nowExistAdd);
  80.     };
  82.     const switchModule = cal => {
  83.       if (cal.type == 'custom') {
  84.         console.log('点击了“选择其他地址”按钮');
  85.       } else {
  86.         console.log('点击了自定义地址左上角的返回按钮');
  87.       }
  88.     };
  90.     const closeMask = val => {
  91.       console.log('关闭弹层', val);
  92.     };
  94.     return { showPopupOther, text, showAddressOther, switchModule, closeMask, close, selected, backBtnIcon, ...toRefs(address) };
  95. }

API

字段说明类型默认值
v-model:visible是否打开地址选择String‘’
type地址选择类型 exist/customString‘custom’
province省，每个省的对象中，必须有 name 字段Array[]
city市，每个市的对象中，必须有 name 字段Array[]
country县，每个县的对象中，必须有 name 字段Array[]
town乡/镇，每个乡/镇的对象中，必须有 name 字段Array[]
exist-address已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下）Array[]
default-icon已有地址列表默认图标，type=‘exist’ 时生效string‘’
selected-icon已有地址列表选中图标，type=‘exist’ 时生效string‘’
close-btn-icon自定义关闭弹框按钮图标string-
back-btn-icon自定义地址与已有地址切换时，自定义返回的按钮图标string-
is-show-custom-address是否可以切换自定义地址选择，type=‘exist’ 时生效Booleantrue
custom-address-title自定义地址选择文案，type=‘custom’ 时生效string‘请选择所在地区’
exist-address-title已有地址文案 ，type=‘exist’ 时生效string‘配送至’
custom-and-exist-title自定义地址与已有地址切换按钮文案 ，type=‘exist’ 时生效string‘选择其他地址’
  • provinceName 省的名字
  • cityName 市的名字
  • countyName 县的名字
  • townName 乡/镇的名字
  • addressDetail 具体地址
  • selectedAddress 字段用于判断当前地址列表的选中项。

Event

字段说明回调参数
change自定义选择地址时，选择地区时触发参考 onChange
selected选择已有地址列表时触发参考 selected
close地址选择弹框关闭时触发参考 close
close-mask点击遮罩层或点击右上角叉号关闭时触发{closeWay:‘mask’/‘cross’}
switch-module点击‘选择其他地址’或自定义地址选择左上角返回按钮触发{type:‘exist’/‘custom’}

change 回调参数

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

selected 回调参数

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

close 回调参数

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

Address 地址组件 - 图1