fix: price、input、addresslist问题 (#2063)

* feat: addresslist 合并代码 * feat: 优化addresslist代码 * feat: price文档demo/input taro问题
jdf2e · Jan 17, 2023 · fdeb122 · fdeb122
1 parent d4c0cfd
commit fdeb122
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 277 deletions.
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.vue b/src/packages/__VUE/addresslist/components/GeneralShell.vue
@@ -1,14 +1,6 @@
 <template>
-  <div class="nut-addresslist-general">
-    <item-contents
-      :item="item"
-      @delIcon="delShellClick"
-      @editIcon="editShellClick"
-      @itemClick="itemShellClick"
-      @touchstart="holddownstart"
-      @touchend="holddownend"
-      @touchmove="holddownmove"
-    >
+  <div class="nut-addresslist-general" v-if="!swipeEdition">
+    <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template v-slot:contentTop>
         <slot name="contentInfo"></slot>
       </template>
@@ -18,7 +10,7 @@
       <template v-slot:contentAddr>
         <slot name="contentAddrs"></slot>
       </template>
-    </item-contents>
+    </component>
     <div class="nut-addresslist-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
       <slot name="longpressAll">
         <div class="nut-addresslist-general__mask-copy" @click="copyCLick">
@@ -27,16 +19,36 @@
         <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-general__mask-del" @click="delLongClick">
           <div class="nut-addresslist-mask-contain"> 删除<br />地址 </div>
         </div>
       </slot>
     </div>
     <div class="nut-addresslist__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
   </div>
+  <nut-swipe v-else>
+    <div class="nut-addresslist-swipe">
+      <component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
+        <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>
+      </component>
+    </div>
+    <template #right>
+      <slot name="swiperightbtn">
+        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
+      </slot>
+    </template>
+  </nut-swipe>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('addresslist-general');
 import ItemContents from './ItemContents.vue';
@@ -50,29 +62,53 @@ export default create({
     longPress: {
       type: Boolean,
       default: false
+    },
+    swipeEdition: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents
   },
 
   setup(props, { emit }) {
+    const renderCompontent = () => {
+      return h(ItemContents, {
+        item: props.item,
+        onDelIcon(event: Event) {
+          delClick(event);
+        },
+        onEditIcon(event: Event) {
+          editClick(event);
+        },
+        onItemClick(event: Event) {
+          itemClick(event);
+        }
+      });
+    };
     let loop: any = null;
+    const moveRef = ref(false);
     const showMaskRef = ref(false);
 
-    const delShellClick = (event: Event) => {
+    const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();
     };
-    const editShellClick = (event: Event) => {
+    const editClick = (event: Event) => {
       emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemShellClick = (event: Event) => {
+    const itemClick = (event: Event) => {
+      if (moveRef.value) return;
       emit('itemClick', event, props.item);
       event.stopPropagation();
     };
+    const delLongClick = (event: Event) => {
+      emit('longDel', event, props.item);
+      event.stopPropagation();
+    };
     const holdingFunc = (event: Event) => {
       loop = 0;
       showMaskRef.value = true;
@@ -103,10 +139,6 @@ export default create({
       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) {
         // 排除长按时触发点击的情况
@@ -115,20 +147,34 @@ export default create({
       event.stopPropagation();
       event.preventDefault();
     };
+    const swipeDelClick = (event: Event) => {
+      emit('swipeDel', event, props.item);
+      event.stopPropagation();
+    };
+    const swipestart = () => {
+      moveRef.value = false;
+    };
+    const swipemove = () => {
+      moveRef.value = true;
+    };
 
     return {
-      delShellClick,
-      editShellClick,
-      itemShellClick,
+      renderCompontent,
+      showMaskRef,
+      itemClick,
+      editClick,
+      delClick,
+      delLongClick,
       holddownstart,
       holddownmove,
       holddownend,
-      showMaskRef,
-      delClick,
       copyCLick,
       hideMaskClick,
       setDefault,
-      maskClick
+      maskClick,
+      swipeDelClick,
+      swipestart,
+      swipemove
     };
   }
 });

diff --git a/src/packages/__VUE/addresslist/components/SwipeShell.vue b/src/packages/__VUE/addresslist/components/SwipeShell.vue
diff --git a/src/packages/__VUE/addresslist/demo.vue b/src/packages/__VUE/addresslist/demo.vue
@@ -24,7 +24,7 @@
       :dataMapOptions="dataMapOptions"
     >
     </nut-addresslist>
-    <h2>{{ translate('title1') }}</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-addresslist
       :data="data"
       swipeEdition

diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
@@ -1,57 +1,35 @@
 <template>
   <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>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="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 v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-addresslist__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('addresslist');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 export default create({
@@ -88,7 +65,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell
   },
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],