地址组件优化 (#1877)

* feat: 发票组件+taro

* feat: 发票组件+taro

* fix: #1450将placeholder默认为空

* fix: 解决发票 radio类型的问题

* fix: navbar修改leftShow默认值

* fix: #1521navbar解决定不安全区域问题

* fix: 修改input taro demo文案

* fix: 修复taro中input@update:model-value事件会触发两次 #1632

* fix: 修复input组件的slot=input插槽报错，卡住页面 #1776

* fix: input 问题修复

* feat: 地址组件优化

src/packages/__VUE/addresslist/addresslist.json

@@ -1,16 +0,0 @@
-{
-  "data": [{
-    "testid": 3,
-    "testaddressName": "姓名",
-    "phone": "123****4567",
-    "defaultAddress": false,
-    "fullAddress": "北京市通州区测试测试测试测试测试测试测试测试测试"
-  },
-  {
-    "testid": 4,
-    "testaddressName": "姓名",
-    "phone": "123****4567",
-    "defaultAddress": true,
-    "fullAddress": "北京市通州区测试测试测试测试测试测试测试测试测试"
-  }]
-}

src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="nut-general-shell">
+  <div class="nut-addresslist-general">
     <item-contents
       :item="item"
-      @delIconClick="delShellClick"
-      @editIconClick="editShellClick"
+      @delIcon="delShellClick"
+      @editIcon="editShellClick"
       @itemClick="itemShellClick"
+      @touchstart="holddownstart"
+      @touchend="holddownend"
+      @touchmove="holddownmove"
     >
       <template v-slot:contentTop>
         <slot name="contentInfo"></slot>
@@ -16,12 +19,26 @@
         <slot name="contentAddrs"></slot>
       </template>
     </item-contents>
+    <div class="nut-addresslist-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
+      <slot name="longpressAll">
+        <div class="nut-addresslist-general__mask-copy" @click="copyCLick">
+          <div class="nut-addresslist-mask-contain"> 复制<br />地址 </div>
+        </div>
+        <div class="nut-addresslist-general__mask-set" @click="setDefault">
+          <div class="nut-addresslist-mask-contain"> 设置<br />默认 </div>
+        </div>
+        <div class="nut-addresslist-general__mask-del" @click="delClick">
+          <div class="nut-addresslist-mask-contain"> 删除<br />地址 </div>
+        </div>
+      </slot>
+    </div>
+    <div class="nut-addresslist__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
   </div>
 </template>
 <script lang="ts">
-import { ref, watch, reactive, toRefs, onMounted, useSlots } from 'vue';
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('general-shell');
+const { create } = createComponent('addresslist-general');
 import ItemContents from './ItemContents.vue';
 
 export default create({
@@ -29,35 +46,89 @@ export default create({
     item: {
       type: Object,
       default: {}
+    },
+    longPress: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['handleDelIcon', 'handleEditIcon', 'handleItemContent', 'handelSwipeDel'],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
   components: {
     ItemContents
   },
 
-  setup(props: any, { emit, slots }) {
-    const delShellClick = (event, item) => {
-      emit('handleDelIcon', event, props.item);
+  setup(props, { emit }) {
+    let loop: any = null;
+    const showMaskRef = ref(false);
+
+    const delShellClick = (event: Event) => {
+      emit('delIcon', event, props.item);
       event.stopPropagation();
     };
-    const editShellClick = (event, item) => {
-      emit('handleEditIcon', event, props.item);
+    const editShellClick = (event: Event) => {
+      emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemShellClick = (event, item) => {
-      emit('handleItemContent', event, props.item);
+    const itemShellClick = (event: Event) => {
+      emit('itemClick', event, props.item);
       event.stopPropagation();
     };
-    const swipeDelClick = (event, item) => {
-      emit('handelSwipeDel', event, props.item);
+    const holdingFunc = (event: Event) => {
+      loop = 0;
+      showMaskRef.value = true;
+      emit('longDown', event, props.item);
+    };
+    // 长按功能实现
+    const holddownstart = (event: Event) => {
+      loop = setTimeout(() => {
+        holdingFunc(event);
+      }, 300);
+    };
+    const holddownmove = () => {
+      // 滑动不触发长按
+      clearTimeout(loop);
+    };
+    const holddownend = () => {
+      // 删除定时器，防止重复注册
+      clearTimeout(loop);
+    };
+    const hideMaskClick = () => {
+      showMaskRef.value = false;
+    };
+    const copyCLick = (event: Event) => {
+      emit('longCopy', event, props.item);
       event.stopPropagation();
     };
+    const setDefault = (event: Event) => {
+      emit('longSet', event, props.item);
+      event.stopPropagation();
+    };
+    const delClick = (event: Event) => {
+      emit('longDel', event, props.item);
+      event.stopPropagation();
+    };
+    const maskClick = (event: Event) => {
+      if (loop != 0) {
+        // 排除长按时触发点击的情况
+        showMaskRef.value = false;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
     return {
       delShellClick,
       editShellClick,
       itemShellClick,
-      swipeDelClick
+      holddownstart,
+      holddownmove,
+      holddownend,
+      showMaskRef,
+      delClick,
+      copyCLick,
+      hideMaskClick,
+      setDefault,
+      maskClick
     };
   }
 });

src/packages/__VUE/addresslist/components/ItemContents.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="nut-item-contents__contain" @click="contentsClick">
-    <div class="nut-item-contents__info">
-      <div class="nut-item-contents__info-contact">
+  <div class="nut-addresslist-item" @click="contentsClick">
+    <div class="nut-addresslist-item__info">
+      <div class="nut-addresslist-item__info-contact">
         <slot name="contentTop">
-          <div class="nut-item-contents__info-contact-name">{{ item.addressName }}</div>
-          <div class="nut-item-contents__info-contact-tel">{{ item.phone }}</div>
-          <div class="nut-item-contents__info-contact-default" v-if="item.defaultAddress">{{
+          <div class="nut-addresslist-item__info-contact-name">{{ item.addressName }}</div>
+          <div class="nut-addresslist-item__info-contact-tel">{{ item.phone }}</div>
+          <div class="nut-addresslist-item__info-contact-default" v-if="item.defaultAddress">{{
             translate('default')
           }}</div>
         </slot>
       </div>
-      <div class="nut-item-contents__info-handle">
+      <div class="nut-addresslist-item__info-handle">
         <slot name="contentIcon">
-          <nut-icon name="del" class="nut-item-contents__info-handle-del" @click="delClick"></nut-icon>
-          <nut-icon name="edit" class="nut-item-contents__info-handle-edit" @click="editClick"></nut-icon>
+          <nut-icon name="del" class="nut-addresslist-item__info-handle-del" @click="delClick"></nut-icon>
+          <nut-icon name="edit" class="nut-addresslist-item__info-handle-edit" @click="editClick"></nut-icon>
         </slot>
       </div>
     </div>
-    <div class="nut-item-contents__addr">
+    <div class="nut-addresslist-item__addr">
       <slot name="contentAddr">
         {{ item.fullAddress }}
       </slot>
@@ -25,36 +25,29 @@
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('item-contents');
+const { create } = createComponent('addresslist-item');
 const { translate } = createComponent('addresslist');
 
 export default create({
   props: {
-    name: {
-      type: String,
-      default: ''
-    },
     item: {
       type: Object,
       default: {}
     }
   },
-  components: {},
-  emits: ['delIconClick', 'editIconClick', 'itemClick'],
+  emits: ['delIcon', 'editIcon', 'itemClick'],
 
   setup(props, { emit }) {
     const delClick = (event: Event) => {
-      emit('delIconClick', event, props.item);
-      // console.log(123);
+      emit('delIcon', event, props.item);
       event.stopPropagation();
     };
     const editClick = (event: Event) => {
-      emit('editIconClick', event, props.item);
+      emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const contentsClick = (event: event) => {
+    const contentsClick = (event: Event) => {
       emit('itemClick', event, props.item);
       event.stopPropagation();
     };
@@ -68,7 +61,3 @@ export default create({
   }
 });
 </script>
-
-<style lang="scss">
-/* @import './index.scss'; */
-</style>

src/packages/__VUE/addresslist/components/LongPressShell.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="nut-long-press-shell">
-    <div
-      class="nut-long-press-shell__contain"
-      @touchstart="holddownstart"
-      @touchend="holddownend"
-      @touchmove="holddownmove"
-    >
-      <item-contents
-        :item="item"
-        @delIconClick="delShellClick"
-        @editIconClick="editShellClick"
-        @itemClick="itemShellClick"
-      >
-        <template v-slot:contentTop>
-          <slot name="contentInfo"></slot>
-        </template>
-        <template v-slot:contentIcon>
-          <slot name="contentIcons"></slot>
-        </template>
-        <template v-slot:contentAddr>
-          <slot name="contentAddrs"></slot>
-        </template>
-      </item-contents>
-      <div class="nut-long-press-shell__contain-mask" v-if="showMaskRef" @click="maskClick">
-        <slot name="longpressAll">
-          <div class="nut-long-press-shell__contain-mask-copy" @click="copyCLick">
-            <div class="mask-contain"> 复制<br />地址 </div>
-          </div>
-          <div class="nut-long-press-shell__contain-mask-set" @click="setDefault">
-            <div class="mask-contain"> 设置<br />默认 </div>
-          </div>
-          <div class="nut-long-press-shell__contain-mask-del" @click="delClick">
-            <div class="mask-contain"> 删除<br />地址 </div>
-          </div>
-        </slot>
-      </div>
-    </div>
-    <div class="nut-addresslist__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
-  </div>
-</template>
-<script lang="ts">
-import { ref, watch, reactive, toRefs, onMounted, useSlots } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('long-press-shell');
-import ItemContents from './ItemContents.vue';
-
-export default create({
-  props: {
-    item: {
-      type: Object,
-      default: {}
-    }
-  },
-  emits: [
-    'holdingDown',
-    'handleDel',
-    'handelMask',
-    'handleCopy',
-    'handleSet',
-    'handleDelIcon',
-    'handleEditIcon',
-    'handleItemContent'
-  ],
-  components: {
-    ItemContents
-  },
-
-  setup(props: any, { emit, slots }) {
-    let loop = null;
-    const showMaskRef = ref(false);
-    const holdingFunc = (event: Event) => {
-      loop = 0;
-      showMaskRef.value = true;
-      emit('holdingDown', event, props.item);
-    };
-    //长按功能实现
-    const holddownstart = (event: Event) => {
-      loop = setTimeout(() => {
-        holdingFunc(event);
-      }, 300);
-    };
-    const holddownmove = (event: Event) => {
-      //滑动不触发长按
-      clearTimeout(loop);
-    };
-    const holddownend = (event: Event) => {
-      //删除定时器，防止重复注册
-      clearTimeout(loop);
-    };
-    const hideMaskClick = (event: Event) => {
-      showMaskRef.value = false;
-    };
-    const copyCLick = (event: Event) => {
-      if (loop == 0) return; //排除长按时触发点击的情况
-      emit('handleCopy', event, props.item);
-      event.stopPropagation();
-    };
-    const setDefault = (event: Event) => {
-      if (loop == 0) return; //排除长按时触发点击的情况
-      emit('handleSet', event, props.item);
-      event.stopPropagation();
-    };
-    const delClick = (event: Event) => {
-      if (loop == 0) return; //排除长按时触发点击的情况
-      emit('handleDel', event, props.item);
-      event.stopPropagation();
-    };
-    const maskClick = (event: Event) => {
-      if (loop != 0) {
-        //排除长按时触发点击的情况
-        showMaskRef.value = false;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-    };
-    const delShellClick = (event, item) => {
-      emit('handleDelIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const editShellClick = (event, item) => {
-      emit('handleEditIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const itemShellClick = (event, item) => {
-      emit('handleItemContent', event, props.item);
-      event.stopPropagation();
-    };
-
-    return {
-      holddownstart,
-      holddownmove,
-      holddownend,
-      showMaskRef,
-      delClick,
-      copyCLick,
-      hideMaskClick,
-      setDefault,
-      maskClick,
-      delShellClick,
-      editShellClick,
-      itemShellClick
-    };
-  }
-});
-</script>

src/packages/__VUE/addresslist/components/SwipeShell.vue

@@ -1,11 +1,11 @@
 <template>
   <nut-swipe>
-    <div class="nut-swipe-shell">
+    <div class="nut-addresslist-swipe">
       <item-contents
         :item="item"
-        @delIconClick="delShellClick"
-        @editIconClick="editShellClick"
-        @itemClick="itemShellClick"
+        @delIcon="delClick"
+        @editIcon="editClick"
+        @itemClick="itemClick"
         @touchmove="swipemove"
         @touchstart="swipestart"
       >
@@ -28,10 +28,9 @@
   </nut-swipe>
 </template>
 <script lang="ts">
-import { ref, watch, reactive, toRefs, onMounted, useSlots } from 'vue';
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('swipe-shell');
-// import { Swipe } from '@nutui/nutui';
+const { create } = createComponent('addresslist-swipe');
 import ItemContents from './ItemContents.vue';
 
 export default create({
@@ -41,29 +40,28 @@ export default create({
       default: {}
     }
   },
-  emits: ['handleDelIcon', 'handleEditIcon', 'handleItemContent', 'handelSwipeDel'],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'swipeDel'],
   components: {
     ItemContents
   },
 
-  setup(props: any, { emit, slots }) {
-    let loop;
+  setup(props, { emit }) {
     const moveRef = ref(false);
-    const delShellClick = (event, item) => {
-      emit('handleDelIcon', event, props.item);
+    const delClick = (event: Event) => {
+      emit('delIcon', event, props.item);
       event.stopPropagation();
     };
-    const editShellClick = (event, item) => {
-      emit('handleEditIcon', event, props.item);
+    const editClick = (event: Event) => {
+      emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemShellClick = (event, item) => {
+    const itemClick = (event: Event) => {
       if (moveRef.value) return;
-      emit('handleItemContent', event, props.item);
+      emit('itemClick', event, props.item);
       event.stopPropagation();
     };
-    const swipeDelClick = (event, item) => {
-      emit('handelSwipeDel', event, props.item);
+    const swipeDelClick = (event: Event) => {
+      emit('swipeDel', event, props.item);
       event.stopPropagation();
     };
 
@@ -75,9 +73,9 @@ export default create({
     };
 
     return {
-      delShellClick,
-      editShellClick,
-      itemShellClick,
+      delClick,
+      editClick,
+      itemClick,
       swipeDelClick,
       swipestart,
       swipemove

src/packages/__VUE/addresslist/demo.vue

@@ -3,9 +3,9 @@
     <h2>{{ translate('basic') }}</h2>
     <nut-addresslist
       :data="data"
-      @handelDelIcon="delClick"
-      @handelEditIcon="editClick"
-      @handelItem="itemClick"
+      @delIcon="delClick"
+      @editIcon="editClick"
+      @itemClick="itemClick"
       :showBottomButton="false"
       :dataMapOptions="dataMapOptions"
     >
@@ -13,14 +13,14 @@
     <h2>{{ translate('title1') }}</h2>
     <nut-addresslist
       :data="data"
-      longPressEdition
+      long-Press
       :showBottomButton="false"
-      @handelDelIcon="delClick"
-      @handelEditIcon="editClick"
-      @handelItem="itemClick"
-      @longPressCopyClick="copyClick"
-      @longPressSetClick="setClick"
-      @longPressDelClick="delClick"
+      @delIcon="delClick"
+      @editIcon="editClick"
+      @itemClick="itemClick"
+      @longCopy="copyClick"
+      @longSet="setClick"
+      @longDel="delClick"
       :dataMapOptions="dataMapOptions"
     >
     </nut-addresslist>
@@ -29,11 +29,11 @@
       :data="data"
       swipeEdition
       showBottomButton
-      @handelDelIcon="delClick"
-      @handelEditIcon="editClick"
-      @handelItem="itemClick"
-      @swipeDelClick="delClick"
-      @addAddressClick="addAddress"
+      @delIcon="delClick"
+      @editIcon="editClick"
+      @itemClick="itemClick"
+      @swipeDel="delClick"
+      @add="addAddress"
       :dataMapOptions="dataMapOptions"
     >
     </nut-addresslist>
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { toRefs, reactive, onMounted, ref } from 'vue';
+import { reactive, ref } from 'vue';
 const { createDemo, translate } = createComponent('addresslist');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -61,7 +61,6 @@ const initTranslate = () =>
 export default createDemo({
   props: {},
   setup() {
-    // const data = ref([]);
     initTranslate();
     const data = ref([
       {
@@ -84,22 +83,7 @@ export default createDemo({
       addressDetail: 'testaddressDetail',
       addressName: 'testaddressName'
     });
-    // onMounted(() => {
-    //   setTimeout(() => {
-    //     getData();
-    //   }, 500);
-    // });
 
-    // const getData = () => {
-    //   fetch('//storage.360buyimg.com/nutui/3x/addresslist.js')
-    //     .then((response) => response.json())
-    //     .then((res) => {
-    //       console.log('res', res)
-    //       data.value = res.data;
-    //       console.log('data', data.value)
-    //     })
-    //     .catch((err) => console.log('Oh, error', err));
-    // };
     const itemClick = () => {
       console.log('Click To Address');
     };
@@ -112,9 +96,6 @@ export default createDemo({
     const copyClick = () => {
       console.log('Click To Copy');
     };
-    const holdDownClick = (event: Event, id: number) => {
-      console.log('Long Press');
-    };
     const setClick = () => {
       console.log('Click On Settings');
     };
@@ -123,7 +104,6 @@ export default createDemo({
     };
     return {
       itemClick,
-      holdDownClick,
       data,
       delClick,
       editClick,

src/packages/__VUE/addresslist/doc.en-US.md

@@ -25,9 +25,9 @@ app.use(Button);
 <template>
   <nut-addresslist
     :data="data"
-    @handelDelIcon="delClick"
-    @handelEditIcon="editClick"
-    @handelItem="itemClick"
+    @delIcon="delClick"
+    @editIcon="editClick"
+    @itemClick="itemClick"
     :show-bottom-button="false"
     :dataMapOptions="dataMapOptions"
   >
@@ -69,7 +69,6 @@ export default {
     }
     return {
       itemClick,
-      holdDownClick,
       data,
       delClick,
       editClick,
@@ -92,11 +91,11 @@ export default {
 <template>
   <nut-addresslist
     :data="data"
-    long-press-edition
+    long-press
     :show-bottom-button="false"
-    @handelDelIcon="delClick"
-    @handelEditIcon="editClick"
-    @handelItem="itemClick"
+    @DelIcon="delClick"
+    @EditIcon="editClick"
+    @Item="itemClick"
     @longPressCopyClick="copyClick"
     @longPressSetClick="setClick"
     @longPressDelClick="delClick"
@@ -141,9 +140,6 @@ export default {
       const copyClick = ()=>{
         Toast.text('Click To Copy');
       }
-      const holdDownClick = (event: Event,id:number)=>{
-        Toast.text('Long Press');
-      }
       const setClick = ()=>{
         Toast.text('Click On Settings');
       }
@@ -152,7 +148,6 @@ export default {
       }
       return {
         itemClick,
-        holdDownClick,
         data,
         delClick,
         editClick,
@@ -176,11 +171,11 @@ export default {
     :data="data"
     swipe-edition
     show-bottom-button
-    @handelItem="itemClick"
-    @handelEditIcon="editClick"
-    @handelDelIcon="delClick"
+    @Item="itemClick"
+    @EditIcon="editClick"
+    @DelIcon="delClick"
     @swipeDelClick="delClick"
-    @addAddressClick="addAddress"
+    @add="addAddress"
     :dataMapOptions="dataMapOptions"
   >
   </nut-addresslist>
@@ -224,7 +219,6 @@ export default {
       }
       return {
         itemClick,
-        holdDownClick,
         data,
         delClick,
         editClick,
@@ -246,7 +240,7 @@ export default {
 | Attribute          | Description       | Type   | Default |
 | ------------------ | ---------------- | ------- | ------ |
 | data               | Address array         | Array   | -      |
-| long-press-edition | Long Press Function   | Boolean | false  |
+| long-press | Long Press Function   | Boolean | false  |
 | swipe-edition      | Swipe right           | Boolean | false  |
 | show-bottom-button | Whether to show the bottom button | Boolean | true   |
 
@@ -254,15 +248,14 @@ export default {
 
 | Event              | Description                  | Arguments         | Remark               |
 | ------------------ | ---------------------------- | ----------------- | ------------------ |
-| handel-del-icon      | Click the delete icon        | event: Event,item | public               |
-| handel-edit-icon     | Click the edit icon          | event: Event,item | public               |
-| handel-del-icon      | Click the delete icon        | event: Event,item | public               |
-| handel-item         | Click on each item in the address list | event: Event,item | public     |
-| add-address-click    | Click the Add Address button at the bottom | event: Event   | public |
-| long-press-copy-click | Click the Copy Address button      | event: Event,item | Click event under long press function |
-| long-press-set-click  | Click the Set Default button       | event: Event,item | Click event under long press function  |
-| long-press-del-click  | Click the Delete Address button    | event: Event,item | Click event under long press function |
-| swipe-del-click      | Default right swipe delete button  | event: Event,item | Click event under swipe function |
+| del-icon      | Click the delete icon        | event: Event,item | public               |
+| edit-icon     | Click the edit icon          | event: Event,item | public               |          |
+| click-item         | Click on each item in the address list | event: Event,item | public     |
+| add    | Click the Add Address button at the bottom | event: Event   | public |
+| long-copy | Click the Copy Address button      | event: Event,item | Click event under long press function |
+| long-set  | Click the Set Default button       | event: Event,item | Click event under long press function  |
+| long-del  | Click the Delete Address button    | event: Event,item | Click event under long press function |
+| swipe-del      | Default right swipe delete button  | event: Event,item | Click event under swipe function |
 
 ### Slots
 

src/packages/__VUE/addresslist/doc.md

@@ -26,9 +26,9 @@ app.use(Button);
 <template>
   <nut-addresslist
     :data="data"
-    @handelDelIcon="delClick"
-    @handelEditIcon="editClick"
-    @handelItem="itemClick"
+    @delIcon="delClick"
+    @editIcon="editClick"
+    @itemClick="itemClick"
     :show-bottom-button="false"
     :dataMapOptions="dataMapOptions"
   >
@@ -93,11 +93,11 @@ export default {
 <template>
   <nut-addresslist
     :data="data"
-    long-press-edition
+    long-press
     :show-bottom-button="false"
-    @handelDelIcon="delClick"
-    @handelEditIcon="editClick"
-    @handelItem="itemClick"
+    @DelIcon="delClick"
+    @EditIcon="editClick"
+    @Item="itemClick"
     @longPressCopyClick="copyClick"
     @longPressSetClick="setClick"
     @longPressDelClick="delClick"
@@ -142,9 +142,6 @@ export default {
       const copyClick = ()=>{
         Toast.text('Click To Copy');
       }
-      const holdDownClick = (event: Event,id:number)=>{
-        Toast.text('Long Press');
-      }
       const setClick = ()=>{
         Toast.text('Click On Settings');
       }
@@ -177,11 +174,11 @@ export default {
     :data="data"
     swipe-edition
     show-bottom-button
-    @handelItem="itemClick"
-    @handelEditIcon="editClick"
-    @handelDelIcon="delClick"
+    @Item="itemClick"
+    @EditIcon="editClick"
+    @DelIcon="delClick"
     @swipeDelClick="delClick"
-    @addAddressClick="addAddress"
+    @add="addAddress"
     :dataMapOptions="dataMapOptions"
   >
   </nut-addresslist>
@@ -247,7 +244,7 @@ export default {
 | 参数               | 说明             | 类型    | 默认值 |
 | ------------------ | ---------------- | ------- | ------ |
 | data               | 地址数组         | Array   | -      |
-| long-press-edition | 长按功能         | Boolean | false  |
+| long-press | 长按功能         | Boolean | false  |
 | swipe-edition      | 右滑功能         | Boolean | false  |
 | show-bottom-button | 是否展示底部按钮 | Boolean | true   |
 
@@ -255,15 +252,14 @@ export default {
 
 | 事件名             | 说明                 | 回调参数          | 备注               |
 | ------------------ | -------------------- | ----------------- | ------------------ |
-| handel-del-icon      | 点击删除图标         | event: Event,item | 公共               |
-| handel-edit-icon     | 点击编辑图标         | event: Event,item | 公共               |
-| handel-del-icon      | 点击删除图标         | event: Event,item | 公共               |
-| handel-item         | 点击地址列表每一项   | event: Event,item | 公共               |
-| add-address-click    | 点击底部添加地址按钮 | event: Event      | 公共               |
-| long-press-copy-click | 点击复制地址按钮     | event: Event,item | 长按功能下点击事件 |
-| long-press-set-click  | 点击设置默认按钮     | event: Event,item | 长按功能下点击事件 |
-| long-press-del-click  | 点击删除地址按钮     | event: Event,item | 长按功能下点击事件 |
-| swipe-del-click      | 默认右滑删除按钮     | event: Event,item | 滑动功能下点击事件 |
+| del-icon      | 点击删除图标         | event: Event,item | 公共               |
+| edit-icon     | 点击编辑图标         | event: Event,item | 公共               |             |
+| click-item         | 点击地址列表每一项   | event: Event,item | 公共               |
+| add    | 点击底部添加地址按钮 | event: Event      | 公共               |
+| long-copy | 点击复制地址按钮     | event: Event,item | 长按功能下点击事件 |
+| long-set  | 点击设置默认按钮     | event: Event,item | 长按功能下点击事件 |
+| long-del  | 点击删除地址按钮     | event: Event,item | 长按功能下点击事件 |
+| swipe-del      | 默认右滑删除按钮     | event: Event,item | 滑动功能下点击事件 |
 
 ### Slots
 

src/packages/__VUE/addresslist/index.scss

@@ -1,34 +1,19 @@
 .nut-theme-dark {
   .nut-addresslist {
-    .nut-long-press-shell {
-      &__contain {
-        background-color: $dark-background2;
-        border-bottom: 1px solid $dark-color-gray;
-        color: $dark-color;
-        &-mask {
-          background-color: $dark-color3;
-          &-copy {
-            color: $dark-color-gray;
-            background-color: $dark-color;
-          }
-        }
-      }
-    }
-    .nut-swipe-shell,
-    .nut-general-shell {
+    &-swipe,
+    &-general {
       background-color: $dark-background2;
       border-bottom: 1px solid $dark-color-gray;
       color: $dark-color;
-    }
-    .nut-item-contents {
-      &__info {
-        &-contact {
-          &-default {
-            background: $addresslist-contnts-contact-default;
-            color: $addresslist-contnts-contact-color;
-          }
+      &__mask {
+        background-color: $dark-color3;
+        &-copy {
+          color: $dark-color-gray;
+          background-color: $dark-color;
         }
       }
+    }
+    &-item {
       &__addr {
         color: $dark-color-gray;
       }
@@ -40,73 +25,11 @@
 }
 .nut-addresslist {
   overflow: hidden;
-  .nut-long-press-shell {
-    &__contain {
-      width: 100%;
-      min-height: 76px;
-      padding: 5px 10px;
-      background-color: $addresslist-bg;
-      border-bottom: 1px solid $addresslist-border;
-      color: $addresslist-font-color;
-      font-size: $addresslist-font-size;
-      display: flex;
-      align-items: center;
-      position: relative;
-      box-sizing: border-box;
-      &-mask {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        background-color: $addresslist-mask-bg;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        padding: 0 40px;
-        z-index: 2001;
-        &-copy,
-        &-set,
-        &-del {
-          height: 55px;
-          width: 55px;
-          border-radius: 50%;
-          text-align: center;
-          background-color: $white;
-          font-size: 14px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        &-set {
-          color: $white;
-          background-color: $addresslist-set-bg;
-        }
-        &-del {
-          color: $white;
-          background-color: $addresslist-del-bg;
-        }
-      }
-    }
-    //设置mask
-    &__mask-bottom {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 2000;
-      background-color: transparent;
-    }
+  &:last-child {
+    padding-bottom: 84px;
   }
-  .nut-long-press-shell:last-child {
-    &__contain {
-      border-bottom: none;
-    }
-  }
-  .nut-swipe-shell,
-  .nut-general-shell {
-    // width:100%;
+  &-swipe,
+  &-general {
     min-height: 76px;
     padding: 5px 10px;
     background-color: $addresslist-bg;
@@ -116,15 +39,46 @@
     display: flex;
     align-items: center;
     position: relative;
-  }
-  .nut-swipe-shell:last-child,
-  .nut-general-shell:last-child {
-    border-bottom: none;
-  }
-  .nut-item-contents {
-    &__contain {
-      width: 100%;
+    &:last-child {
+      border-bottom: none;
+    }
+    &__mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: $addresslist-mask-bg;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 0 40px;
+      z-index: 2001;
+      &-copy,
+      &-set,
+      &-del {
+        height: 55px;
+        width: 55px;
+        border-radius: 50%;
+        text-align: center;
+        background-color: $white;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      &-set {
+        color: $white;
+        background-color: $addresslist-set-bg;
+      }
+      &-del {
+        color: $white;
+        background-color: $addresslist-del-bg;
+      }
     }
+  }
+  &-item {
+    width: 100%;
     &__info {
       display: flex;
       justify-content: space-between;
@@ -178,7 +132,13 @@
     background-color: $addresslist-bg;
     box-sizing: border-box;
   }
-}
-.nut-addresslist:last-child {
-  padding-bottom: 84px;
+  .nut-addresslist__mask-bottom {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2000;
+    background-color: transparent;
+  }
 }

src/packages/__VUE/addresslist/index.taro.vue

@@ -1,74 +1,66 @@
 <template>
-  <div class="nut-addresslist">
-    <general-shell
-      v-if="!longPressEdition && !swipeEdition"
-      v-for="(item, index) of dataArray"
-      :key="'general' + index"
-      :item="item"
-      @handleDelIcon="clickDelIcon"
-      @handleEditIcon="clickEditIcon"
-      @handleItemContent="clickContentItem"
-      @handelSwipeDel="clickSwipeDel"
-    >
-    </general-shell>
-    <long-press-shell
-      v-if="longPressEdition && !swipeEdition"
-      v-for="(item, index) of dataArray"
-      :key="'longpress' + index"
-      :item="item"
-      @handleDelIcon="clickDelIcon"
-      @handleEditIcon="clickEditIcon"
-      @handleItemContent="clickContentItem"
-      @handleCopy="clickLongCopy"
-      @handleSet="clickLongSet"
-      @handleDel="clickLongDel"
-    >
-      <template v-slot:contentInfo>
-        <slot name="iteminfos"></slot>
-      </template>
-      <template v-slot:contentIcons>
-        <slot name="itemicon"></slot>
-      </template>
-      <template v-slot:contentAddrs>
-        <slot name="itemaddr"></slot>
-      </template>
-      <template v-slot:longpressAll>
-        <slot name="longpressbtns"></slot>
-      </template>
-    </long-press-shell>
-    <swipe-shell
-      v-if="!longPressEdition && swipeEdition"
-      v-for="(item, index) of dataArray"
-      :key="'swipe' + index"
-      :item="item"
-      @handleDelIcon="clickDelIcon"
-      @handleEditIcon="clickEditIcon"
-      @handleItemContent="clickContentItem"
-      @handelSwipeDel="clickSwipeDel"
-    >
-      <template v-slot:contentInfo>
-        <slot name="iteminfos"></slot>
-      </template>
-      <template v-slot:contentIcons>
-        <slot name="itemicon"></slot>
-      </template>
-      <template v-slot:contentAddrs>
-        <slot name="itemaddr"></slot>
-      </template>
-      <template v-slot:swiperightbtn>
-        <slot name="swiperight"></slot>
-      </template>
-    </swipe-shell>
+  <div :class="classes">
+    <template v-if="!swipeEdition">
+      <general-shell
+        v-for="(item, index) of dataArray"
+        :key="index"
+        :item="item"
+        :longPress="longPress"
+        @delIcon="clickDelIcon"
+        @editIcon="clickEditIcon"
+        @itemClick="clickContentItem"
+        @swipeDel="clickSwipeDel"
+        @longCopy="clickLongCopy"
+        @longSet="clickLongSet"
+        @longDel="clickLongDel"
+      >
+        <template v-slot:contentInfo v-if="longPress">
+          <slot name="iteminfos"></slot>
+        </template>
+        <template v-slot:contentIcons v-if="longPress">
+          <slot name="itemicon"></slot>
+        </template>
+        <template v-slot:contentAddrs v-if="longPress">
+          <slot name="itemaddr"></slot>
+        </template>
+        <template v-slot:longpressAll v-if="longPress">
+          <slot name="longpressbtns"></slot>
+        </template>
+      </general-shell>
+    </template>
+    <template v-if="swipeEdition">
+      <swipe-shell
+        v-for="(item, index) of dataArray"
+        :key="index"
+        :item="item"
+        @delIcon="clickDelIcon"
+        @editIcon="clickEditIcon"
+        @itemClick="clickContentItem"
+        @swipeDel="clickSwipeDel"
+      >
+        <template v-slot:contentInfo>
+          <slot name="iteminfos"></slot>
+        </template>
+        <template v-slot:contentIcons>
+          <slot name="itemicon"></slot>
+        </template>
+        <template v-slot:contentAddrs>
+          <slot name="itemaddr"></slot>
+        </template>
+        <template v-slot:swiperightbtn>
+          <slot name="swiperight"></slot>
+        </template>
+      </swipe-shell>
+    </template>
     <div class="nut-addresslist__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, watch } from 'vue';
+import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('addresslist');
-import LongPressShell from './components/LongPressShell.vue';
 import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
@@ -78,7 +70,7 @@ export default create({
       type: Array,
       default: []
     },
-    longPressEdition: {
+    longPress: {
       type: Boolean,
       default: false
     },
@@ -96,20 +88,10 @@ export default create({
     }
   },
   components: {
-    LongPressShell,
     SwipeShell,
     GeneralShell
   },
-  emits: [
-    'handelDelIcon',
-    'handelEditIcon',
-    'handelItem',
-    'longPressCopyClick',
-    'longPressSetClick',
-    'longPressDelClick',
-    'swipeDelClick',
-    'addAddressClick'
-  ],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
     const dataArray = ref([]);
@@ -120,58 +102,64 @@ export default create({
       defaultAddress: false,
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
     //磨平参数差异
     const trowelData = () => {
       if (Object.keys(props.dataMapOptions).length > 0) {
-        dataArray.value = props.data.map((item, index) => {
+        dataArray.value = props.data.map((item) => {
           return floatData(dataInfo, item, props.dataMapOptions);
         });
       }
     };
 
-    // 监听props.data的变更重新渲染列表
     watch(
       () => props.data,
       () => trowelData(),
       { deep: true }
     );
 
-    const clickDelIcon = (event, item) => {
-      emit('handelDelIcon', event, item);
+    const clickDelIcon = (event: Event, item: unknown) => {
+      emit('delIcon', event, item);
       event.stopPropagation();
     };
-    const clickEditIcon = (event, item) => {
-      emit('handelEditIcon', event, item);
+    const clickEditIcon = (event: Event, item: unknown) => {
+      emit('editIcon', event, item);
       event.stopPropagation();
     };
-    const clickContentItem = (event, item) => {
-      emit('handelItem', event, item);
+    const clickContentItem = (event: Event, item: unknown) => {
+      emit('itemClick', event, item);
       event.stopPropagation();
     };
-    const clickLongCopy = (event, item) => {
-      emit('longPressCopyClick', event, item);
+    const clickLongCopy = (event: Event, item: unknown) => {
+      emit('longCopy', event, item);
       event.stopPropagation();
     };
-    const clickLongSet = (event, item) => {
-      emit('longPressSetClick', event, item);
+    const clickLongSet = (event: Event, item: unknown) => {
+      emit('longSet', event, item);
       event.stopPropagation();
     };
-    const clickLongDel = (event, item) => {
-      emit('longPressDelClick', event, item);
+    const clickLongDel = (event: Event, item: unknown) => {
+      emit('longDel', event, item);
       event.stopPropagation();
     };
-    const clickSwipeDel = (event, item) => {
-      emit('swipeDelClick', event, item);
+    const clickSwipeDel = (event: Event, item: unknown) => {
+      emit('swipeDel', event, item);
       event.stopPropagation();
     };
-    const addAddress = (event) => {
-      emit('addAddressClick', event);
+    const addAddress = (event: Event) => {
+      emit('add', event);
       event.stopPropagation();
     };
     onMounted(() => {
       trowelData();
     });
     return {
+      classes,
       clickDelIcon,
       clickEditIcon,
       clickContentItem,

src/packages/__VUE/addresslist/index.vue

@@ -1,74 +1,66 @@
 <template>
-  <div class="nut-addresslist">
-    <general-shell
-      v-if="!longPressEdition && !swipeEdition"
-      v-for="(item, index) of dataArray"
-      :key="'general' + index"
-      :item="item"
-      @handleDelIcon="clickDelIcon"
-      @handleEditIcon="clickEditIcon"
-      @handleItemContent="clickContentItem"
-      @handelSwipeDel="clickSwipeDel"
-    >
-    </general-shell>
-    <long-press-shell
-      v-if="longPressEdition && !swipeEdition"
-      v-for="(item, index) of dataArray"
-      :key="'longpress' + index"
-      :item="item"
-      @handleDelIcon="clickDelIcon"
-      @handleEditIcon="clickEditIcon"
-      @handleItemContent="clickContentItem"
-      @handleCopy="clickLongCopy"
-      @handleSet="clickLongSet"
-      @handleDel="clickLongDel"
-    >
-      <template v-slot:contentInfo>
-        <slot name="iteminfos"></slot>
-      </template>
-      <template v-slot:contentIcons>
-        <slot name="itemicon"></slot>
-      </template>
-      <template v-slot:contentAddrs>
-        <slot name="itemaddr"></slot>
-      </template>
-      <template v-slot:longpressAll>
-        <slot name="longpressbtns"></slot>
-      </template>
-    </long-press-shell>
-    <swipe-shell
-      v-if="!longPressEdition && swipeEdition"
-      v-for="(item, index) of dataArray"
-      :key="'swipe' + index"
-      :item="item"
-      @handleDelIcon="clickDelIcon"
-      @handleEditIcon="clickEditIcon"
-      @handleItemContent="clickContentItem"
-      @handelSwipeDel="clickSwipeDel"
-    >
-      <template v-slot:contentInfo>
-        <slot name="iteminfos"></slot>
-      </template>
-      <template v-slot:contentIcons>
-        <slot name="itemicon"></slot>
-      </template>
-      <template v-slot:contentAddrs>
-        <slot name="itemaddr"></slot>
-      </template>
-      <template v-slot:swiperightbtn>
-        <slot name="swiperight"></slot>
-      </template>
-    </swipe-shell>
+  <div :class="classes">
+    <template v-if="!swipeEdition">
+      <general-shell
+        v-for="(item, index) of dataArray"
+        :key="index"
+        :item="item"
+        :longPress="longPress"
+        @delIcon="clickDelIcon"
+        @editIcon="clickEditIcon"
+        @itemClick="clickContentItem"
+        @swipeDel="clickSwipeDel"
+        @longCopy="clickLongCopy"
+        @longSet="clickLongSet"
+        @longDel="clickLongDel"
+      >
+        <template v-slot:contentInfo v-if="longPress">
+          <slot name="iteminfos"></slot>
+        </template>
+        <template v-slot:contentIcons v-if="longPress">
+          <slot name="itemicon"></slot>
+        </template>
+        <template v-slot:contentAddrs v-if="longPress">
+          <slot name="itemaddr"></slot>
+        </template>
+        <template v-slot:longpressAll v-if="longPress">
+          <slot name="longpressbtns"></slot>
+        </template>
+      </general-shell>
+    </template>
+    <template v-if="swipeEdition">
+      <swipe-shell
+        v-for="(item, index) of dataArray"
+        :key="index"
+        :item="item"
+        @delIcon="clickDelIcon"
+        @editIcon="clickEditIcon"
+        @itemClick="clickContentItem"
+        @swipeDel="clickSwipeDel"
+      >
+        <template v-slot:contentInfo>
+          <slot name="iteminfos"></slot>
+        </template>
+        <template v-slot:contentIcons>
+          <slot name="itemicon"></slot>
+        </template>
+        <template v-slot:contentAddrs>
+          <slot name="itemaddr"></slot>
+        </template>
+        <template v-slot:swiperightbtn>
+          <slot name="swiperight"></slot>
+        </template>
+      </swipe-shell>
+    </template>
     <div class="nut-addresslist__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, watch } from 'vue';
+import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('addresslist');
-import LongPressShell from './components/LongPressShell.vue';
 import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
@@ -78,7 +70,7 @@ export default create({
       type: Array,
       default: []
     },
-    longPressEdition: {
+    longPress: {
       type: Boolean,
       default: false
     },
@@ -96,20 +88,10 @@ export default create({
     }
   },
   components: {
-    LongPressShell,
     SwipeShell,
     GeneralShell
   },
-  emits: [
-    'handelDelIcon',
-    'handelEditIcon',
-    'handelItem',
-    'longPressCopyClick',
-    'longPressSetClick',
-    'longPressDelClick',
-    'swipeDelClick',
-    'addAddressClick'
-  ],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
     const dataArray = ref([]);
@@ -120,59 +102,64 @@ export default create({
       defaultAddress: false,
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
     //磨平参数差异
     const trowelData = () => {
-      // console.log('props.data', props.data);
       if (Object.keys(props.dataMapOptions).length > 0) {
-        dataArray.value = props.data.map((item, index) => {
+        dataArray.value = props.data.map((item) => {
           return floatData(dataInfo, item, props.dataMapOptions);
         });
       }
     };
 
-    // 监听props.data的变更重新渲染列表
     watch(
       () => props.data,
       () => trowelData(),
       { deep: true }
     );
 
-    const clickDelIcon = (event, item) => {
-      emit('handelDelIcon', event, item);
+    const clickDelIcon = (event: Event, item: unknown) => {
+      emit('delIcon', event, item);
       event.stopPropagation();
     };
-    const clickEditIcon = (event, item) => {
-      emit('handelEditIcon', event, item);
+    const clickEditIcon = (event: Event, item: unknown) => {
+      emit('editIcon', event, item);
       event.stopPropagation();
     };
-    const clickContentItem = (event, item) => {
-      emit('handelItem', event, item);
+    const clickContentItem = (event: Event, item: unknown) => {
+      emit('itemClick', event, item);
       event.stopPropagation();
     };
-    const clickLongCopy = (event, item) => {
-      emit('longPressCopyClick', event, item);
+    const clickLongCopy = (event: Event, item: unknown) => {
+      emit('longCopy', event, item);
       event.stopPropagation();
     };
-    const clickLongSet = (event, item) => {
-      emit('longPressSetClick', event, item);
+    const clickLongSet = (event: Event, item: unknown) => {
+      emit('longSet', event, item);
       event.stopPropagation();
     };
-    const clickLongDel = (event, item) => {
-      emit('longPressDelClick', event, item);
+    const clickLongDel = (event: Event, item: unknown) => {
+      emit('longDel', event, item);
       event.stopPropagation();
     };
-    const clickSwipeDel = (event, item) => {
-      emit('swipeDelClick', event, item);
+    const clickSwipeDel = (event: Event, item: unknown) => {
+      emit('swipeDel', event, item);
       event.stopPropagation();
     };
-    const addAddress = (event) => {
-      emit('addAddressClick', event);
+    const addAddress = (event: Event) => {
+      emit('add', event);
       event.stopPropagation();
     };
     onMounted(() => {
       trowelData();
     });
     return {
+      classes,
       clickDelIcon,
       clickEditIcon,
       clickContentItem,

src/sites/mobile-taro/vue/src/business/pages/addresslist/index.vue

@@ -3,9 +3,9 @@
     <h2>基础用法</h2>
     <nut-addresslist
       :data="data"
-      @handelDelIcon="delClick"
-      @handelEditIcon="editClick"
-      @handelItem="itemClick"
+      @delIcon="delClick"
+      @editIcon="editClick"
+      @itemClick="itemClick"
       :showBottomButton="false"
       :dataMapOptions="dataMapOptions"
     >
@@ -13,14 +13,14 @@
     <h2>长按功能</h2>
     <nut-addresslist
       :data="data"
-      longPressEdition
+      longPress
       :showBottomButton="false"
-      @handelDelIcon="delClick"
-      @handelEditIcon="editClick"
-      @handelItem="itemClick"
-      @longPressCopyClick="copyClick"
-      @longPressSetClick="setClick"
-      @longPressDelClick="delClick"
+      @delIcon="delClick"
+      @editIcon="editClick"
+      @itemClick="itemClick"
+      @longCopy="copyClick"
+      @longSet="setClick"
+      @longDel="delClick"
       :dataMapOptions="dataMapOptions"
     >
     </nut-addresslist>
@@ -29,11 +29,11 @@
       :data="data"
       swipeEdition
       showBottomButton
-      @handelDelIcon="delClick"
-      @handelEditIcon="editClick"
-      @handelItem="itemClick"
+      @delIcon="delClick"
+      @editIcon="editClick"
+      @itemClick="itemClick"
       @swipeDelClick="delClick"
-      @addAddressClick="addAddress"
+      @add="addAddress"
       :dataMapOptions="dataMapOptions"
     >
     </nut-addresslist>
@@ -79,9 +79,6 @@ export default {
     const copyClick = () => {
       console.log('复制成功～');
     };
-    const holdDownClick = (event: Event, id: number) => {
-      console.log('长按～');
-    };
     const setClick = () => {
       console.log('点击了设置～');
     };
@@ -90,7 +87,6 @@ export default {
     };
     return {
       itemClick,
-      holdDownClick,
       data,
       delClick,
       editClick,