feat: address 组件文案撰写

src/packages/address/demo.vue

@@ -34,7 +34,7 @@
       @on-change="cal => onChange(cal, 'showPopupExist')"
       @close="close2"
       :isShowCustomAddress="false"
-      @selected="selected2"
+      @selected="selected"
       existAddressTitle="配送至"
     ></nut-address>
 
@@ -53,7 +53,7 @@
       @on-change="cal => onChange(cal, 'showPopupCustomImg')"
       @close="close3"
       :isShowCustomAddress="false"
-      @selected="selected3"
+      @selected="selected"
       :defaultIcon="defaultIcon"
       :selectedIcon="selectedIcon"
       :closeBtnIcon="closeBtnIcon"
@@ -78,7 +78,7 @@
       :backBtnIcon="backBtnIcon"
       @on-change="cal => onChange(cal, 'showPopupOther')"
       @close="close4"
-      @selected="selected4"
+      @selected="selected"
       customAndExistTitle="选择其他地址"
       @switchModule="switchModule"
       @closeMask="closeMask"
@@ -223,17 +223,20 @@ export default createDemo({
     const close2 = val => {
       console.log(val);
       if (val.type == 'exist') {
+        const {
+          provinceName,
+          cityName,
+          countyName,
+          townName,
+          addressDetail
+        } = val.data;
         text.two =
-          val.data.provinceName +
-          val.data.cityName +
-          val.data.countyName +
-          val.data.townName +
-          val.data.addressDetail;
+          provinceName + cityName + countyName + townName + addressDetail;
       } else {
         text.two = val.data.addressStr;
       }
     };
-    const selected2 = (prevExistAdd, nowExistAdd, arr) => {
+    const selected = (prevExistAdd, nowExistAdd, arr) => {
       console.log(prevExistAdd);
       console.log(nowExistAdd);
     };
@@ -248,38 +251,36 @@ export default createDemo({
     const close3 = val => {
       console.log(val);
       if (val.type == 'exist') {
+        const {
+          provinceName,
+          cityName,
+          countyName,
+          townName,
+          addressDetail
+        } = val.data;
         text.three =
-          val.data.provinceName +
-          val.data.cityName +
-          val.data.countyName +
-          val.data.townName +
-          val.data.addressDetail;
+          provinceName + cityName + countyName + townName + addressDetail;
       } else {
         text.three = val.data.addressStr;
       }
     };
-    const selected3 = (prevExistAdd, nowExistAdd, arr) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
 
     const close4 = val => {
       console.log(val);
       if (val.type == 'exist') {
+        const {
+          provinceName,
+          cityName,
+          countyName,
+          townName,
+          addressDetail
+        } = val.data;
         text.four =
-          val.data.provinceName +
-          val.data.cityName +
-          val.data.countyName +
-          val.data.townName +
-          val.data.addressDetail;
+          provinceName + cityName + countyName + townName + addressDetail;
       } else {
         text.four = val.data.addressStr;
       }
     };
-    const selected4 = (prevExistAdd, nowExistAdd, arr) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
 
     const switchModule = cal => {
       if (cal.type == 'custom') {
@@ -304,7 +305,7 @@ export default createDemo({
       close1,
       showAddressExist,
       close2,
-      selected2,
+      selected,
       showPopupExist,
       showPopupCustomImg,
       showPopupOther,
@@ -312,9 +313,7 @@ export default createDemo({
       showAddressOther,
       showCustomImg,
       close3,
-      selected3,
       close4,
-      selected4,
       switchModule,
       closeMask,
       ...toRefs(icon),
@@ -330,7 +329,7 @@ export default createDemo({
     align-items: center;
 
     .nut-cell__value {
-      margin-right: 5px;
+      margin-right: 8px;
     }
   }
 }

src/packages/address/doc.md

@@ -1,34 +1,432 @@
 #  address组件
 
-    ### 介绍
-    
-    基于 xxxxxxx
-    
-    ### 安装
-    
-    
-    
-    ## 代码演示
-    
-    ### 基础用法1
-    
-
-    
-    ## API
-    
-    ### Props
-    
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
-    
-    ### Events
-    
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
+### 介绍
+
+按需加载请加载对应依赖组件 Icon Popup
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Address, Icon, Popup } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Address);
+app.use(Icon);
+app.use(Popup);
+
+```
+
+## 代码演示
+
+### 选择自定义地址
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
+<nut-address
+    v-model:show="showPopup"
+    :province="province"
+    :city="city"
+    :country="country"
+    :town="town"
+    @on-change="onChange"
+    @close="close"
+    customAddressTitle="请选择所在地区"
+></nut-address>
+```
+```javascript
+setup() {
+    const showPopup = ref(false);
+    const province = ref([
+      { id: 1, name: '北京' },
+      { id: 2, name: '广西' },
+      { id: 3, name: '江西' },
+      { id: 4, name: '四川' }
+    ]); // 省
+
+    const city = ref([
+      { id: 7, name: '朝阳区' },
+      { id: 8, name: '崇文区' },
+      { id: 9, name: '昌平区' },
+      { id: 6, name: '石景山区' }
+    ]); // 市
+
+    const country = ref([
+      { id: 3, name: '八里庄街道' },
+      { id: 9, name: '北苑' },
+      { id: 4, name: '常营乡' }
+    ]); // 县
+
+    const text = ref('请选择地址')
+
+    const town = ref([]); // 镇
+
+    const showAddress = () => {
+      showPopup.value = !showPopup.value;
+    };
+
+    const onChange = (cal) => {
+      let name = province;
+      switch (cal.next) {
+        case 'province':
+          name = province;
+          break;
+        case 'city':
+          name = city;
+          break;
+        case 'country':
+          name = city;
+          break;
+        default:
+          name = town;
+          break;
+      }
+      if (name.value.length < 1) {
+        showPopup.value = false;
+      }
+    };
+    const close = val => {
+      console.log(val);
+      text.value = val.data.addressStr;
+    };
+
+    return { showPopup, province, city, country, town, text, showAddress, onChange, close };
+}
+```
+
+### 选择已有地址
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
+<nut-address
+    v-model:show="showPopupExist"
+    type="exist"
+    :existAddress="existAddress"
+    @close="close"
+    :isShowCustomAddress="false"
+    @selected="selected"
+    existAddressTitle="配送至"
+></nut-address>
+```
+```javascript
+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 };
+}
+```
+### 自定义图标
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
+<nut-address
+    v-model:show="showPopupCustomImg"
+    type="exist"
+    :existAddress="existAddress"
+    @close="close"
+    :isShowCustomAddress="false"
+    @selected="selected3"
+    :defaultIcon="defaultIcon"
+    :selectedIcon="selectedIcon"
+    :closeBtnIcon="closeBtnIcon"
+></nut-address>
+```
+```javascript
+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) };
+}
+```
+### 自定义地址与已有地址切换
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
+<nut-address
+    v-model:show="showPopupOther"
+    type="exist"
+    :existAddress="existAddress"
+    :province="province"
+    :city="city"
+    :country="country"
+    :town="town"
+    :backBtnIcon="backBtnIcon"
+    @close="close"
+    @selected="selected"
+    customAndExistTitle="选择其他地址"
+    @switchModule="switchModule"
+    @closeMask="closeMask"
+></nut-address>
+```
+```javascript
+setup() {
+    const showPopupOther = ref(false);
+    const province = ref([
+      { id: 1, name: '北京' },
+      { id: 2, name: '广西' },
+      { id: 3, name: '江西' },
+      { id: 4, name: '四川' }
+    ]); // 省
+
+    const city = ref([
+      { id: 7, name: '朝阳区' },
+      { id: 8, name: '崇文区' },
+      { id: 9, name: '昌平区' },
+      { id: 6, name: '石景山区' }
+    ]); // 市
+
+    const country = ref([
+      { id: 3, name: '八里庄街道' },
+      { id: 9, name: '北苑' },
+      { id: 4, name: '常营乡' }
+    ]); // 县
+
+    const town = ref([]); // 镇
+    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, province, city, country, town, text, showAddressOther, switchModule, closeMask, close, selected, backBtnIcon };
+}
+```
+# API
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| v-model:show | 是否打开地址选择 | 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 | ''
+| closeBtnIcon | 自定义关闭弹框按钮图标 | string | -
+| backBtnIcon | 自定义地址与已有地址切换时，自定义返回的按钮图标 | string | -
+| isShowCustomAddress | 是否可以切换自定义地址选择，type=‘exist’ 时生效 | Boolean | true
+| customAddressTitle  | 自定义地址选择文案，type='custom' 时生效 | string | '请选择所在地区'
+| existAddressTitle| 已有地址文案 ，type=‘exist’ 时生效| string | '配送至'
+| customAndExistTitle| 自定义地址与已有地址切换按钮文案 ，type=‘exist’ 时生效| string | '选择其他地址'
+
+
+  * provinceName 省的名字
+  * cityName 市的名字
+  * countyName 县的名字
+  * townName 乡/镇的名字
+  * addressDetail 具体地址
+  * selectedAddress 字段用于判断当前地址列表的选中项。
+
+## Event
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| onChange | 自定义选择地址时，选择地区时触发 |  参考 onChange
+| selected | 选择已有地址列表时触发 | 参考 selected
+| close | 地址选择弹框关闭时触发 | 参考 close
+| closeMask | 点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
+| switchModule | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
+
+
+## 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 为选择的地址组合 | {}