import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Address \u5730\u5740

\u4ECB\u7ECD

\u6309\u9700\u52A0\u8F7D\u8BF7\u52A0\u8F7D\u5BF9\u5E94\u4F9D\u8D56\u7EC4\u4EF6 Icon Popup Elevator

\u5B89\u88C5

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);

\u4EE3\u7801\u6F14\u793A

\u9009\u62E9\u81EA\u5B9A\u4E49\u5730\u5740

<nut-cell title="\u9009\u62E9\u5730\u5740" :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="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
></nut-address>

setup() {
    const showPopup = ref(false);
    const address = reactive({
      province:[
        { id: 1, name: '\u5317\u4EAC' },
        { id: 2, name: '\u5E7F\u897F' },
        { id: 3, name: '\u6C5F\u897F' },
        { id: 4, name: '\u56DB\u5DDD' }
      ],
      city:[
        { id: 7, name: '\u671D\u9633\u533A' },
        { id: 8, name: '\u5D07\u6587\u533A' },
        { id: 9, name: '\u660C\u5E73\u533A' },
        { id: 6, name: '\u77F3\u666F\u5C71\u533A' }
      ],
      country:[
        { id: 3, name: '\u516B\u91CC\u5E84\u8857\u9053' },
        { id: 9, name: '\u5317\u82D1' },
        { id: 4, name: '\u5E38\u8425\u4E61' }
      ],
      town:[]
    })

    const text = ref('\u8BF7\u9009\u62E9\u5730\u5740')

    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) };
}

\u9009\u62E9\u81EA\u5B9A\u4E49\u5730\u57402

<nut-cell title="\u9009\u62E9\u5730\u5740" :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="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
></nut-address>

setup() {
    const showPopup = ref(false);
    const address = reactive({
      province: [
        { id: 1, name: '\u5317\u4EAC', title: 'B' },
        { id: 2, name: '\u5E7F\u897F', title: 'G' },
        { id: 3, name: '\u6C5F\u897F', title: 'J' },
        { id: 4, name: '\u56DB\u5DDD', title: 'S' },
        { id: 5, name: '\u6D59\u6C5F', title: 'Z' }
      ],
      city: [
        { id: 7, name: '\u671D\u9633\u533A', title: 'C' },
        { id: 8, name: '\u5D07\u6587\u533A', title: 'C' },
        { id: 9, name: '\u660C\u5E73\u533A', title: 'C' },
        { id: 6, name: '\u77F3\u666F\u5C71\u533A', title: 'S' },
        { id: 3, name: '\u516B\u91CC\u5E84\u8857\u9053', title: 'B' },
        { id: 9, name: '\u5317\u82D1', title: 'B' }
      ],
      country: [
        { id: 3, name: '\u516B\u91CC\u5E84\u8857\u9053', title: 'B' },
        { id: 9, name: '\u5317\u82D1', title: 'B' },
        { id: 4, name: '\u5E38\u8425\u4E61', title: 'C' }
      ],
      town:[]
    })

    const text = ref('\u8BF7\u9009\u62E9\u5730\u5740')

    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) };
}

\u9009\u62E9\u5DF2\u6709\u5730\u5740

<nut-cell title="\u9009\u62E9\u5730\u5740" :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="\u914D\u9001\u81F3"
></nut-address>

setup() {
    const showPopupExist = ref(false);
    const existAddress = ref([
      {
        id: 1,
        addressDetail: 'th ',
        cityName: '\u77F3\u666F\u5C71\u533A',
        countyName: '\u57CE\u533A',
        provinceName: '\u5317\u4EAC',
        selectedAddress: true,
        townName: ''
      },{
        id: 2,
        addressDetail: '12_ ',
        cityName: '\u7535\u996D\u9505',
        countyName: '\u6276\u7EE5\u53BF',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      },{
        id: 3,
        addressDetail: '\u53D1\u5927\u6C34\u6BD4 ',
        cityName: '\u653E\u5230',
        countyName: '\u5E7F\u5B81\u8857\u9053',
        provinceName: '\u9493\u9C7C\u5C9B\u5168\u533A',
        selectedAddress: false,
        townName: ''
      },{
        id: 4,
        addressDetail: '\u8FD8\u662F\u60F3\u5427\u767E\u5EA6\u5427 ',
        cityName: '\u7814\u53D1',
        countyName: '\u516B\u91CC\u5E84\u8857\u9053',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      }
    ]);

    const text = ref('\u8BF7\u9009\u62E9\u5730\u5740')

    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 };
}

\u81EA\u5B9A\u4E49\u56FE\u6807

<nut-cell title="\u9009\u62E9\u5730\u5740" :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: '\u77F3\u666F\u5C71\u533A',
        countyName: '\u57CE\u533A',
        provinceName: '\u5317\u4EAC',
        selectedAddress: true,
        townName: ''
      },{
        id: 2,
        addressDetail: '12_ ',
        cityName: '\u7535\u996D\u9505',
        countyName: '\u6276\u7EE5\u53BF',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      },{
        id: 3,
        addressDetail: '\u53D1\u5927\u6C34\u6BD4 ',
        cityName: '\u653E\u5230',
        countyName: '\u5E7F\u5B81\u8857\u9053',
        provinceName: '\u9493\u9C7C\u5C9B\u5168\u533A',
        selectedAddress: false,
        townName: ''
      },{
        id: 4,
        addressDetail: '\u8FD8\u662F\u60F3\u5427\u767E\u5EA6\u5427 ',
        cityName: '\u7814\u53D1',
        countyName: '\u516B\u91CC\u5E84\u8857\u9053',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      }
    ]);

    const text = ref('\u8BF7\u9009\u62E9\u5730\u5740')

    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) };
}

\u81EA\u5B9A\u4E49\u5730\u5740\u4E0E\u5DF2\u6709\u5730\u5740\u5207\u6362

<nut-cell title="\u9009\u62E9\u5730\u5740" :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="\u9009\u62E9\u5176\u4ED6\u5730\u5740"
    @switch-module="switchModule"
    @close-mask="closeMask"
></nut-address>

setup() {
    const showPopupOther = ref(false);
    const address = reactive({
      province:[
        { id: 1, name: '\u5317\u4EAC' },
        { id: 2, name: '\u5E7F\u897F' },
        { id: 3, name: '\u6C5F\u897F' },
        { id: 4, name: '\u56DB\u5DDD' }
      ],
      city:[
        { id: 7, name: '\u671D\u9633\u533A' },
        { id: 8, name: '\u5D07\u6587\u533A' },
        { id: 9, name: '\u660C\u5E73\u533A' },
        { id: 6, name: '\u77F3\u666F\u5C71\u533A' }
      ],
      country:[
        { id: 3, name: '\u516B\u91CC\u5E84\u8857\u9053' },
        { id: 9, name: '\u5317\u82D1' },
        { id: 4, name: '\u5E38\u8425\u4E61' }
      ],
      town:[]
    })
    const existAddress = ref([
      {
        id: 1,
        addressDetail: 'th ',
        cityName: '\u77F3\u666F\u5C71\u533A',
        countyName: '\u57CE\u533A',
        provinceName: '\u5317\u4EAC',
        selectedAddress: true,
        townName: ''
      },
      {
        id: 2,
        addressDetail: '12_ ',
        cityName: '\u7535\u996D\u9505',
        countyName: '\u6276\u7EE5\u53BF',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      },
      {
        id: 3,
        addressDetail: '\u53D1\u5927\u6C34\u6BD4 ',
        cityName: '\u653E\u5230',
        countyName: '\u5E7F\u5B81\u8857\u9053',
        provinceName: '\u9493\u9C7C\u5C9B\u5168\u533A',
        selectedAddress: false,
        townName: ''
      },
      {
        id: 4,
        addressDetail: '\u8FD8\u662F\u60F3\u5427\u767E\u5EA6\u5427 ',
        cityName: '\u7814\u53D1',
        countyName: '\u516B\u91CC\u5E84\u8857\u9053',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      }
    ]);
    const backBtnIcon = ref('left')
    const text = ref('\u8BF7\u9009\u62E9\u5730\u5740')

    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('\u70B9\u51FB\u4E86\u201C\u9009\u62E9\u5176\u4ED6\u5730\u5740\u201D\u6309\u94AE');
      } else {
        console.log('\u70B9\u51FB\u4E86\u81EA\u5B9A\u4E49\u5730\u5740\u5DE6\u4E0A\u89D2\u7684\u8FD4\u56DE\u6309\u94AE');
      }
    };

    const closeMask = val => {
      console.log('\u5173\u95ED\u5F39\u5C42', val);
    };

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

API

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model:visible\u662F\u5426\u6253\u5F00\u5730\u5740\u9009\u62E9String\u2018\u2019
type\u5730\u5740\u9009\u62E9\u7C7B\u578B exist/custom/custom2String\u2018custom\u2019
province\u7701\uFF0C\u6BCF\u4E2A\u7701\u7684\u5BF9\u8C61\u4E2D\uFF0C\u5FC5\u987B\u6709 name \u5B57\u6BB5\uFF0C\u5982\u679C\u7C7B\u578B\u9009\u62E9 custom2\uFF0C\u5FC5\u987B\u6307\u5B9A title \u5B57\u6BB5\u4E3A\u9996\u5B57\u6BCDArray[]
city\u5E02\uFF0C\u6BCF\u4E2A\u5E02\u7684\u5BF9\u8C61\u4E2D\uFF0C\u5FC5\u987B\u6709 name \u5B57\u6BB5\uFF0C\u5982\u679C\u7C7B\u578B\u9009\u62E9 custom2\uFF0C\u5FC5\u987B\u6307\u5B9A title \u5B57\u6BB5\u4E3A\u9996\u5B57\u6BCDArray[]
country\u53BF\uFF0C\u6BCF\u4E2A\u53BF\u7684\u5BF9\u8C61\u4E2D\uFF0C\u5FC5\u987B\u6709 name \u5B57\u6BB5\uFF0C\u5982\u679C\u7C7B\u578B\u9009\u62E9 custom2\uFF0C\u5FC5\u987B\u6307\u5B9A title \u5B57\u6BB5\u4E3A\u9996\u5B57\u6BCDArray[]
town\u4E61/\u9547\uFF0C\u6BCF\u4E2A\u4E61/\u9547\u7684\u5BF9\u8C61\u4E2D\uFF0C\u5FC5\u987B\u6709 name \u5B57\u6BB5\uFF0C\u5982\u679C\u7C7B\u578B\u9009\u62E9 custom2\uFF0C\u5FC5\u987B\u6307\u5B9A title \u5B57\u6BB5\u4E3A\u9996\u5B57\u6BCDArray[]
height\u5F39\u5C42\u4E2D\u5185\u5BB9\u5BB9\u5668\u7684\u9AD8\u5EA6\uFF0C\u4EC5\u5728type="custom2"\u65F6\u6709\u6548String\u3001Number\u2018200px\u2019
exist-address\u5DF2\u5B58\u5728\u5730\u5740\u5217\u8868\uFF0C\u6BCF\u4E2A\u5730\u5740\u5BF9\u8C61\u4E2D\uFF0C\u5FC5\u4F20\u503CprovinceName\u3001cityName\u3001countyName\u3001townName\u3001addressDetail\u3001selectedAddress\uFF08\u5B57\u6BB5\u89E3\u91CA\u89C1\u4E0B\uFF09Array[]
default-icon\u5DF2\u6709\u5730\u5740\u5217\u8868\u9ED8\u8BA4\u56FE\u6807\uFF0Ctype=\u2018exist\u2019 \u65F6\u751F\u6548String\u2018\u2019
selected-icon\u5DF2\u6709\u5730\u5740\u5217\u8868\u9009\u4E2D\u56FE\u6807\uFF0Ctype=\u2018exist\u2019 \u65F6\u751F\u6548String\u2018\u2019
close-btn-icon\u81EA\u5B9A\u4E49\u5173\u95ED\u5F39\u6846\u6309\u94AE\u56FE\u6807string-
back-btn-icon\u81EA\u5B9A\u4E49\u5730\u5740\u4E0E\u5DF2\u6709\u5730\u5740\u5207\u6362\u65F6\uFF0C\u81EA\u5B9A\u4E49\u8FD4\u56DE\u7684\u6309\u94AE\u56FE\u6807String-
is-show-custom-address\u662F\u5426\u53EF\u4EE5\u5207\u6362\u81EA\u5B9A\u4E49\u5730\u5740\u9009\u62E9\uFF0Ctype=\u2018exist\u2019 \u65F6\u751F\u6548Booleantrue
custom-address-title\u81EA\u5B9A\u4E49\u5730\u5740\u9009\u62E9\u6587\u6848\uFF0Ctype=\u2018custom\u2019 \u65F6\u751F\u6548String\u2018\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A\u2019
exist-address-title\u5DF2\u6709\u5730\u5740\u6587\u6848 \uFF0Ctype=\u2018exist\u2019 \u65F6\u751F\u6548String\u2018\u914D\u9001\u81F3\u2019
custom-and-exist-title\u81EA\u5B9A\u4E49\u5730\u5740\u4E0E\u5DF2\u6709\u5730\u5740\u5207\u6362\u6309\u94AE\u6587\u6848 \uFF0Ctype=\u2018exist\u2019 \u65F6\u751F\u6548String\u2018\u9009\u62E9\u5176\u4ED6\u5730\u5740\u2019

Event

\u5B57\u6BB5\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u81EA\u5B9A\u4E49\u9009\u62E9\u5730\u5740\u65F6\uFF0C\u9009\u62E9\u5730\u533A\u65F6\u89E6\u53D1\u53C2\u8003 onChange
selected\u9009\u62E9\u5DF2\u6709\u5730\u5740\u5217\u8868\u65F6\u89E6\u53D1\u53C2\u8003 selected
close\u5730\u5740\u9009\u62E9\u5F39\u6846\u5173\u95ED\u65F6\u89E6\u53D1\u53C2\u8003 close
close-mask\u70B9\u51FB\u906E\u7F69\u5C42\u6216\u70B9\u51FB\u53F3\u4E0A\u89D2\u53C9\u53F7\u5173\u95ED\u65F6\u89E6\u53D1{closeWay:\u2018mask\u2019/\u2018cross\u2019}
switch-module\u70B9\u51FB\u2018\u9009\u62E9\u5176\u4ED6\u5730\u5740\u2019\u6216\u81EA\u5B9A\u4E49\u5730\u5740\u9009\u62E9\u5DE6\u4E0A\u89D2\u8FD4\u56DE\u6309\u94AE\u89E6\u53D1{type:\u2018exist\u2019/\u2018custom\u2019/\u2018custom2\u2019}

change \u56DE\u8C03\u53C2\u6570

\u53C2\u6570\u8BF4\u660E\u53EF\u80FD\u503C
custom\u5F53\u524D\u70B9\u51FB\u7684\u884C\u653F\u533A\u57DFprovince(\u7701) / city(\u5E02) / country(\u53BF) / town(\u4E61)
next\u5F53\u524D\u70B9\u51FB\u7684\u884C\u653F\u533A\u57DF\u7684\u4E0B\u4E00\u7EA7province(\u7701) / city(\u5E02) / country(\u53BF) / town(\u4E61)
value\u5F53\u524D\u70B9\u51FB\u7684\u884C\u653F\u533A\u57DF\u7684\u503C\uFF08\u8FD4\u56DE\u4F20\u5165\u7684\u503C\uFF09{}

selected \u56DE\u8C03\u53C2\u6570

\u53C2\u6570\u8BF4\u660E\u53EF\u80FD\u503C
\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF08prevExistAdd\uFF09\u9009\u62E9\u524D\u9009\u4E2D\u7684\u5730\u5740{}
\u7B2C\u4E8C\u4E2A\u53C2\u6570\uFF08nowExistAdd\uFF09\u5F53\u524D\u9009\u4E2D\u7684\u5730\u5740{}
\u7B2C\u4E09\u4E2A\u53C2\u6570\uFF08arr\uFF09\u9009\u62E9\u5B8C\u4E4B\u540E\u7684\u5DF2\u6709\u5730\u5740\u5217\u8868\uFF08selectedAddress \u503C\u53D1\u751F\u6539\u53D8\uFF09{}

close \u56DE\u8C03\u53C2\u6570

\u53C2\u6570\u8BF4\u660E\u53EF\u80FD\u503C
type\u5730\u5740\u9009\u62E9\u7C7B\u578B exist/custom/custom2exist/custom/custom2
data\u9009\u62E9\u5730\u5740\u7684\u503C,custom \u65F6\uFF0CaddressStr \u4E3A\u9009\u62E9\u7684\u5730\u5740\u7EC4\u5408{}
`,32),c=[p],o={setup(e,{expose:s}){return s({frontmatter:{}}),(h,j)=>(n(),a("div",l,c))}};export{o as default};