Address 地址

介绍

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

安装

import { createApp } from 'vue';
//vue
import { Address, Popup, Elevator } from '@nutui/nutui';
//taro
import { Address, Popup, Elevator } from '@nutui/nutui-taro';

const app = createApp();
app.use(Address);
app.use(Popup);
app.use(Elevator);

代码演示

选择自定义地址

<nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
<nut-address
    v-model:visible="showPopup"
    :province="province"
    :city="city"
    :country="country"
    :town="town"
    @change="onChange"
    @close="close"
    custom-address-title="请选择所在地区"
></nut-address>

setup() {
    const showPopup = ref(false);
    const address = reactive({
      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:[]
    })

    const text = ref('请选择地址')

    const showAddress = () => {
      showPopup.value = !showPopup.value;
    };

    const onChange = (cal) => {
      const name = address[cal.next]
      if (name.length < 1) {
        showPopup.value = false;
      }
    };
    const close = val => {
      console.log(val);
      text.value = val.data.addressStr;
    };

    return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
}

选择自定义地址2

<nut-cell title="选择地址" :desc="text" type="custom2" is-link @click="showAddress"></nut-cell>
<nut-address
    v-model:visible="showPopup"
    :province="province"
    :city="city"
    :country="country"
    :town="town"
    @change="onChange"
    @close="close"
    custom-address-title="请选择所在地区"
></nut-address>

setup() {
    const showPopup = ref(false);
    const address = reactive({
      province: [
        { id: 1, name: '北京', title: 'B' },
        { id: 2, name: '广西', title: 'G' },
        { id: 3, name: '江西', title: 'J' },
        { id: 4, name: '四川', title: 'S' },
        { id: 5, name: '浙江', title: 'Z' }
      ],
      city: [
        { id: 7, name: '朝阳区', title: 'C' },
        { id: 8, name: '崇文区', title: 'C' },
        { id: 9, name: '昌平区', title: 'C' },
        { id: 6, name: '石景山区', title: 'S' },
        { id: 3, name: '八里庄街道', title: 'B' },
        { id: 9, name: '北苑', title: 'B' }
      ],
      country: [
        { id: 3, name: '八里庄街道', title: 'B' },
        { id: 9, name: '北苑', title: 'B' },
        { id: 4, name: '常营乡', title: 'C' }
      ],
      town:[]
    })

    const text = ref('请选择地址')

    const showAddress = () => {
      showPopup.value = !showPopup.value;
    };

    const onChange = (cal) => {
      const name = address[cal.next]
      if (name.length < 1) {
        showPopup.value = false;
      }
    };
    const close = val => {
      console.log(val);
      text.value = val.data.addressStr;
    };

    return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
}

选择已有地址

<nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
<nut-address
    v-model:visible="showPopupExist"
    type="exist"
    :exist-address="existAddress"
    @close="close"
    :is-show-custom-address="false"
    @selected="selected"
    exist-address-title="配送至"
></nut-address>

setup() {
    const showPopupExist = ref(false);
    const existAddress = ref([
      {
        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: ''
      }
    ]);

    const text = ref('请选择地址')

    const showAddressExist = () => {
      showPopupExist.value = true;
    };

    const close = val => {
      if (val.type == 'exist') {
        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
        text.value = provinceName + cityName + countyName + townName + addressDetail;
      } else {
        text.value = val.data.addressStr;
      }
    };

    const selected = (prevExistAdd, nowExistAdd, arr) => {
      console.log(prevExistAdd);
      console.log(nowExistAdd);
    };

    return { showPopupExist, existAddress, showAddressExist, text, close, selected };
}

自定义图标

<nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
<nut-address
    v-model:visible="showPopupCustomImg"
    type="exist"
    :existAddress="existAddress"
    @close="close"
    :is-show-custom-address="false"
    @selected="selected3"
    :default-icon="defaultIcon"
    :selected-icon="selectedIcon"
    :close-btn-icon="closeBtnIcon"
></nut-address>

setup() {
    const showPopupCustomImg = ref(false);
    const icon = reactive({
      selectedIcon: 'heart-fill',
      defaultIcon: 'heart1',
      closeBtnIcon: 'close',
      backBtnIcon: 'left'
    });
    const existAddress = ref([
      {
        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: ''
      }
    ]);

    const text = ref('请选择地址')

    const showCustomImg = () => {
      showPopupCustomImg.value = true;
    };

    const close = val => {
      if (val.type == 'exist') {
        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
        text.value = provinceName + cityName + countyName + townName + addressDetail;
      } else {
        text.value = val.data.addressStr;
      }
    };

    const selected = (prevExistAdd, nowExistAdd, arr) => {
      console.log(prevExistAdd);
      console.log(nowExistAdd);
    };

    return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected, ...toRefs(icon) };
}

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

<nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
<nut-address
    v-model:visible="showPopupOther"
    type="exist"
    :exist-address="existAddress"
    :province="province"
    :city="city"
    :country="country"
    :town="town"
    :back-btn-icon="backBtnIcon"
    @close="close"
    @selected="selected"
    custom-and-exist-title="选择其他地址"
    @switch-module="switchModule"
    @close-mask="closeMask"
></nut-address>

setup() {
    const showPopupOther = ref(false);
    const address = reactive({
      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:[]
    })
    const existAddress = ref([
      {
        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: ''
      }
    ]);
    const backBtnIcon = ref('left')
    const text = ref('请选择地址')

    const showAddressOther = () => {
      showPopupOther.value = true;
    };

    const close = val => {
      if (val.type == 'exist') {
        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
        text.value = provinceName + cityName + countyName + townName + addressDetail;
      } else {
        text.value = val.data.addressStr;
      }
    };

    const selected = (prevExistAdd, nowExistAdd, arr) => {
      console.log(prevExistAdd);
      console.log(nowExistAdd);
    };

    const switchModule = cal => {
      if (cal.type == 'custom') {
        console.log('点击了“选择其他地址”按钮');
      } else {
        console.log('点击了自定义地址左上角的返回按钮');
      }
    };

    const closeMask = val => {
      console.log('关闭弹层', val);
    };

    return { showPopupOther, text, showAddressOther, switchModule, closeMask, close, selected, backBtnIcon, ...toRefs(address) };
}

API

字段	说明	类型	默认值
v-model:visible	是否打开地址选择	String	''
type	地址选择类型 exist/custom/custom2	String	'custom'
province	省，每个省的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母	Array	[]
city	市，每个市的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母	Array	[]
country	县，每个县的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母	Array	[]
town	乡/镇，每个乡/镇的对象中，必须有 name 字段，如果类型选择 custom2，必须指定 title 字段为首字母	Array	[]
height	弹层中内容容器的高度，仅在type="custom2"时有效	String、Number	'200px'
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’ 时生效	Boolean	true
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'/'custom2'}

change 回调参数

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

selected 回调参数

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

close 回调参数

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

doc.md 14 KB 履歴 Raw

Address 地址

介绍

安装

代码演示

选择自定义地址

选择自定义地址2

选择已有地址

自定义图标

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

API

Event

change 回调参数

selected 回调参数

close 回调参数

doc.md 14 KB

履歴 Raw