Skip to content

Commit 50c71c1

Browse files
ailululuailululu
authored
小程序demo 文档对比修改 (#2012)
1 parent a0276cc commit 50c71c1

File tree

26 files changed

+570
-283
lines changed

26 files changed

+570
-283
lines changed

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

+73-27
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
11
<template>
2-
<div class="nut-address-list-general">
3-
<item-contents
4-
:item="item"
5-
@delIcon="delShellClick"
6-
@editIcon="editShellClick"
7-
@itemClick="itemShellClick"
8-
@touchstart="holddownstart"
9-
@touchend="holddownend"
10-
@touchmove="holddownmove"
11-
>
2+
<div class="nut-address-list-general" v-if="!swipeEdition">
3+
<component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
124
<template v-slot:contentTop>
135
<slot name="contentInfo"></slot>
146
</template>
@@ -18,7 +10,7 @@
1810
<template v-slot:contentAddr>
1911
<slot name="contentAddrs"></slot>
2012
</template>
21-
</item-contents>
13+
</component>
2214
<div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
2315
<slot name="longpressAll">
2416
<div class="nut-address-list-general__mask-copy" @click="copyCLick">
@@ -27,16 +19,36 @@
2719
<div class="nut-address-list-general__mask-set" @click="setDefault">
2820
<div class="nut-address-list-mask-contain"> 设置<br />默认 </div>
2921
</div>
30-
<div class="nut-address-list-general__mask-del" @click="delClick">
22+
<div class="nut-address-list-general__mask-del" @click="delLongClick">
3123
<div class="nut-address-list-mask-contain"> 删除<br />地址 </div>
3224
</div>
3325
</slot>
3426
</div>
3527
<div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
3628
</div>
29+
<nut-swipe v-else>
30+
<div class="nut-address-list-swipe">
31+
<component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
32+
<template v-slot:contentTop>
33+
<slot name="contentInfo"></slot>
34+
</template>
35+
<template v-slot:contentIcon>
36+
<slot name="contentIcons"></slot>
37+
</template>
38+
<template v-slot:contentAddr>
39+
<slot name="contentAddrs"></slot>
40+
</template>
41+
</component>
42+
</div>
43+
<template #right>
44+
<slot name="swiperightbtn">
45+
<nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
46+
</slot>
47+
</template>
48+
</nut-swipe>
3749
</template>
3850
<script lang="ts">
39-
import { ref } from 'vue';
51+
import { ref, h } from 'vue';
4052
import { createComponent } from '@/packages/utils/create';
4153
const { create } = createComponent('addresslist-general');
4254
import ItemContents from './ItemContents.vue';
@@ -50,29 +62,53 @@ export default create({
5062
longPress: {
5163
type: Boolean,
5264
default: false
65+
},
66+
swipeEdition: {
67+
type: Boolean,
68+
default: false
5369
}
5470
},
55-
emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
71+
emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
5672
components: {
5773
ItemContents
5874
},
5975
6076
setup(props, { emit }) {
77+
const renderCompontent = () => {
78+
return h(ItemContents, {
79+
item: props.item,
80+
onDelIcon(event: Event) {
81+
delClick(event);
82+
},
83+
onEditIcon(event: Event) {
84+
editClick(event);
85+
},
86+
onItemClick(event: Event) {
87+
itemClick(event);
88+
}
89+
});
90+
};
6191
let loop: any = null;
92+
const moveRef = ref(false);
6293
const showMaskRef = ref(false);
6394
64-
const delShellClick = (event: Event) => {
95+
const delClick = (event: Event) => {
6596
emit('delIcon', event, props.item);
6697
event.stopPropagation();
6798
};
68-
const editShellClick = (event: Event) => {
99+
const editClick = (event: Event) => {
69100
emit('editIcon', event, props.item);
70101
event.stopPropagation();
71102
};
72-
const itemShellClick = (event: Event) => {
103+
const itemClick = (event: Event) => {
104+
if (moveRef.value) return;
73105
emit('itemClick', event, props.item);
74106
event.stopPropagation();
75107
};
108+
const delLongClick = (event: Event) => {
109+
emit('longDel', event, props.item);
110+
event.stopPropagation();
111+
};
76112
const holdingFunc = (event: Event) => {
77113
loop = 0;
78114
showMaskRef.value = true;
@@ -103,10 +139,6 @@ export default create({
103139
emit('longSet', event, props.item);
104140
event.stopPropagation();
105141
};
106-
const delClick = (event: Event) => {
107-
emit('longDel', event, props.item);
108-
event.stopPropagation();
109-
};
110142
const maskClick = (event: Event) => {
111143
if (loop != 0) {
112144
// 排除长按时触发点击的情况
@@ -115,20 +147,34 @@ export default create({
115147
event.stopPropagation();
116148
event.preventDefault();
117149
};
150+
const swipeDelClick = (event: Event) => {
151+
emit('swipeDel', event, props.item);
152+
event.stopPropagation();
153+
};
154+
const swipestart = () => {
155+
moveRef.value = false;
156+
};
157+
const swipemove = () => {
158+
moveRef.value = true;
159+
};
118160
119161
return {
120-
delShellClick,
121-
editShellClick,
122-
itemShellClick,
162+
renderCompontent,
163+
showMaskRef,
164+
itemClick,
165+
editClick,
166+
delClick,
167+
delLongClick,
123168
holddownstart,
124169
holddownmove,
125170
holddownend,
126-
showMaskRef,
127-
delClick,
128171
copyCLick,
129172
hideMaskClick,
130173
setDefault,
131-
maskClick
174+
maskClick,
175+
swipeDelClick,
176+
swipestart,
177+
swipemove
132178
};
133179
}
134180
});

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

-85
This file was deleted.

‎src/packages/__VUE/addresslist/demo.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
:dataMapOptions="dataMapOptions"
2525
>
2626
</nut-address-list>
27-
<h2>{{ translate('title1') }}</h2>
27+
<h2>{{ translate('title2') }}</h2>
2828
<nut-address-list
2929
:data="data"
3030
swipeEdition

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

+30-54
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,35 @@
11
<template>
22
<div :class="classes">
3-
<template v-if="!swipeEdition">
4-
<general-shell
5-
v-for="(item, index) of dataArray"
6-
:key="index"
7-
:item="item"
8-
:longPress="longPress"
9-
@delIcon="clickDelIcon"
10-
@editIcon="clickEditIcon"
11-
@itemClick="clickContentItem"
12-
@swipeDel="clickSwipeDel"
13-
@longCopy="clickLongCopy"
14-
@longSet="clickLongSet"
15-
@longDel="clickLongDel"
16-
>
17-
<template v-slot:contentInfo v-if="longPress">
18-
<slot name="iteminfos"></slot>
19-
</template>
20-
<template v-slot:contentIcons v-if="longPress">
21-
<slot name="itemicon"></slot>
22-
</template>
23-
<template v-slot:contentAddrs v-if="longPress">
24-
<slot name="itemaddr"></slot>
25-
</template>
26-
<template v-slot:longpressAll v-if="longPress">
27-
<slot name="longpressbtns"></slot>
28-
</template>
29-
</general-shell>
30-
</template>
31-
<template v-if="swipeEdition">
32-
<swipe-shell
33-
v-for="(item, index) of dataArray"
34-
:key="index"
35-
:item="item"
36-
@delIcon="clickDelIcon"
37-
@editIcon="clickEditIcon"
38-
@itemClick="clickContentItem"
39-
@swipeDel="clickSwipeDel"
40-
>
41-
<template v-slot:contentInfo>
42-
<slot name="iteminfos"></slot>
43-
</template>
44-
<template v-slot:contentIcons>
45-
<slot name="itemicon"></slot>
46-
</template>
47-
<template v-slot:contentAddrs>
48-
<slot name="itemaddr"></slot>
49-
</template>
50-
<template v-slot:swiperightbtn>
51-
<slot name="swiperight"></slot>
52-
</template>
53-
</swipe-shell>
54-
</template>
3+
<general-shell
4+
v-for="(item, index) of dataArray"
5+
:key="index"
6+
:item="item"
7+
:longPress="longPress"
8+
:swipeEdition="swipeEdition"
9+
@delIcon="clickDelIcon"
10+
@editIcon="clickEditIcon"
11+
@itemClick="clickContentItem"
12+
@swipeDel="clickSwipeDel"
13+
@longCopy="clickLongCopy"
14+
@longSet="clickLongSet"
15+
@longDel="clickLongDel"
16+
>
17+
<template v-slot:contentInfo>
18+
<slot name="iteminfos"></slot>
19+
</template>
20+
<template v-slot:contentIcons>
21+
<slot name="itemicon"></slot>
22+
</template>
23+
<template v-slot:contentAddrs>
24+
<slot name="itemaddr"></slot>
25+
</template>
26+
<template v-slot:longpressAll v-if="longPress">
27+
<slot name="longpressbtns"></slot>
28+
</template>
29+
<template v-slot:swiperightbtn v-if="swipeEdition">
30+
<slot name="swiperight"></slot>
31+
</template>
32+
</general-shell>
5533
<div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
5634
<nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
5735
</div>
@@ -61,7 +39,6 @@
6139
import { reactive, onMounted, ref, watch, computed } from 'vue';
6240
import { createComponent } from '@/packages/utils/create';
6341
const { componentName, create, translate } = createComponent('address-list');
64-
import SwipeShell from './components/SwipeShell.vue';
6542
import GeneralShell from './components/GeneralShell.vue';
6643
import { floatData } from '@/packages/utils/util';
6744
import Button from '../button/index.taro.vue';
@@ -90,7 +67,6 @@ export default create({
9067
}
9168
},
9269
components: {
93-
SwipeShell,
9470
GeneralShell,
9571
[Button.name]: Button,
9672
[Swipe.name]: Swipe

0 commit comments

Comments
 (0)