Skip to content

Commit 884b17c

Browse files
ailululuailululu
authored
地址组件优化 (#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: 地址组件优化
1 parent a93fd40 commit 884b17c

File tree

12 files changed

+412
-616
lines changed

12 files changed

+412
-616
lines changed

‎src/packages/__VUE/addresslist/addresslist.json

-16
This file was deleted.

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

+87-16
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<template>
2-
<div class="nut-general-shell">
2+
<div class="nut-addresslist-general">
33
<item-contents
44
:item="item"
5-
@delIconClick="delShellClick"
6-
@editIconClick="editShellClick"
5+
@delIcon="delShellClick"
6+
@editIcon="editShellClick"
77
@itemClick="itemShellClick"
8+
@touchstart="holddownstart"
9+
@touchend="holddownend"
10+
@touchmove="holddownmove"
811
>
912
<template v-slot:contentTop>
1013
<slot name="contentInfo"></slot>
@@ -16,48 +19,116 @@
1619
<slot name="contentAddrs"></slot>
1720
</template>
1821
</item-contents>
22+
<div class="nut-addresslist-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
23+
<slot name="longpressAll">
24+
<div class="nut-addresslist-general__mask-copy" @click="copyCLick">
25+
<div class="nut-addresslist-mask-contain"> 复制<br />地址 </div>
26+
</div>
27+
<div class="nut-addresslist-general__mask-set" @click="setDefault">
28+
<div class="nut-addresslist-mask-contain"> 设置<br />默认 </div>
29+
</div>
30+
<div class="nut-addresslist-general__mask-del" @click="delClick">
31+
<div class="nut-addresslist-mask-contain"> 删除<br />地址 </div>
32+
</div>
33+
</slot>
34+
</div>
35+
<div class="nut-addresslist__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
1936
</div>
2037
</template>
2138
<script lang="ts">
22-
import { ref, watch, reactive, toRefs, onMounted, useSlots } from 'vue';
39+
import { ref } from 'vue';
2340
import { createComponent } from '@/packages/utils/create';
24-
const { componentName, create } = createComponent('general-shell');
41+
const { create } = createComponent('addresslist-general');
2542
import ItemContents from './ItemContents.vue';
2643
2744
export default create({
2845
props: {
2946
item: {
3047
type: Object,
3148
default: {}
49+
},
50+
longPress: {
51+
type: Boolean,
52+
default: false
3253
}
3354
},
34-
emits: ['handleDelIcon', 'handleEditIcon', 'handleItemContent', 'handelSwipeDel'],
55+
emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
3556
components: {
3657
ItemContents
3758
},
3859
39-
setup(props: any, { emit, slots }) {
40-
const delShellClick = (event, item) => {
41-
emit('handleDelIcon', event, props.item);
60+
setup(props, { emit }) {
61+
let loop: any = null;
62+
const showMaskRef = ref(false);
63+
64+
const delShellClick = (event: Event) => {
65+
emit('delIcon', event, props.item);
4266
event.stopPropagation();
4367
};
44-
const editShellClick = (event, item) => {
45-
emit('handleEditIcon', event, props.item);
68+
const editShellClick = (event: Event) => {
69+
emit('editIcon', event, props.item);
4670
event.stopPropagation();
4771
};
48-
const itemShellClick = (event, item) => {
49-
emit('handleItemContent', event, props.item);
72+
const itemShellClick = (event: Event) => {
73+
emit('itemClick', event, props.item);
5074
event.stopPropagation();
5175
};
52-
const swipeDelClick = (event, item) => {
53-
emit('handelSwipeDel', event, props.item);
76+
const holdingFunc = (event: Event) => {
77+
loop = 0;
78+
showMaskRef.value = true;
79+
emit('longDown', event, props.item);
80+
};
81+
// 长按功能实现
82+
const holddownstart = (event: Event) => {
83+
loop = setTimeout(() => {
84+
holdingFunc(event);
85+
}, 300);
86+
};
87+
const holddownmove = () => {
88+
// 滑动不触发长按
89+
clearTimeout(loop);
90+
};
91+
const holddownend = () => {
92+
// 删除定时器，防止重复注册
93+
clearTimeout(loop);
94+
};
95+
const hideMaskClick = () => {
96+
showMaskRef.value = false;
97+
};
98+
const copyCLick = (event: Event) => {
99+
emit('longCopy', event, props.item);
54100
event.stopPropagation();
55101
};
102+
const setDefault = (event: Event) => {
103+
emit('longSet', event, props.item);
104+
event.stopPropagation();
105+
};
106+
const delClick = (event: Event) => {
107+
emit('longDel', event, props.item);
108+
event.stopPropagation();
109+
};
110+
const maskClick = (event: Event) => {
111+
if (loop != 0) {
112+
// 排除长按时触发点击的情况
113+
showMaskRef.value = false;
114+
}
115+
event.stopPropagation();
116+
event.preventDefault();
117+
};
118+
56119
return {
57120
delShellClick,
58121
editShellClick,
59122
itemShellClick,
60-
swipeDelClick
123+
holddownstart,
124+
holddownmove,
125+
holddownend,
126+
showMaskRef,
127+
delClick,
128+
copyCLick,
129+
hideMaskClick,
130+
setDefault,
131+
maskClick
61132
};
62133
}
63134
});

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

+15-26
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,53 @@
11
<template>
2-
<div class="nut-item-contents__contain" @click="contentsClick">
3-
<div class="nut-item-contents__info">
4-
<div class="nut-item-contents__info-contact">
2+
<div class="nut-addresslist-item" @click="contentsClick">
3+
<div class="nut-addresslist-item__info">
4+
<div class="nut-addresslist-item__info-contact">
55
<slot name="contentTop">
6-
<div class="nut-item-contents__info-contact-name">{{ item.addressName }}</div>
7-
<div class="nut-item-contents__info-contact-tel">{{ item.phone }}</div>
8-
<div class="nut-item-contents__info-contact-default" v-if="item.defaultAddress">{{
6+
<div class="nut-addresslist-item__info-contact-name">{{ item.addressName }}</div>
7+
<div class="nut-addresslist-item__info-contact-tel">{{ item.phone }}</div>
8+
<div class="nut-addresslist-item__info-contact-default" v-if="item.defaultAddress">{{
99
translate('default')
1010
}}</div>
1111
</slot>
1212
</div>
13-
<div class="nut-item-contents__info-handle">
13+
<div class="nut-addresslist-item__info-handle">
1414
<slot name="contentIcon">
15-
<nut-icon name="del" class="nut-item-contents__info-handle-del" @click="delClick"></nut-icon>
16-
<nut-icon name="edit" class="nut-item-contents__info-handle-edit" @click="editClick"></nut-icon>
15+
<nut-icon name="del" class="nut-addresslist-item__info-handle-del" @click="delClick"></nut-icon>
16+
<nut-icon name="edit" class="nut-addresslist-item__info-handle-edit" @click="editClick"></nut-icon>
1717
</slot>
1818
</div>
1919
</div>
20-
<div class="nut-item-contents__addr">
20+
<div class="nut-addresslist-item__addr">
2121
<slot name="contentAddr">
2222
{{ item.fullAddress }}
2323
</slot>
2424
</div>
2525
</div>
2626
</template>
2727
<script lang="ts">
28-
import { toRefs, reactive, onMounted, ref, watch } from 'vue';
2928
import { createComponent } from '@/packages/utils/create';
30-
const { componentName, create } = createComponent('item-contents');
29+
const { create } = createComponent('addresslist-item');
3130
const { translate } = createComponent('addresslist');
3231
3332
export default create({
3433
props: {
35-
name: {
36-
type: String,
37-
default: ''
38-
},
3934
item: {
4035
type: Object,
4136
default: {}
4237
}
4338
},
44-
components: {},
45-
emits: ['delIconClick', 'editIconClick', 'itemClick'],
39+
emits: ['delIcon', 'editIcon', 'itemClick'],
4640
4741
setup(props, { emit }) {
4842
const delClick = (event: Event) => {
49-
emit('delIconClick', event, props.item);
50-
// console.log(123);
43+
emit('delIcon', event, props.item);
5144
event.stopPropagation();
5245
};
5346
const editClick = (event: Event) => {
54-
emit('editIconClick', event, props.item);
47+
emit('editIcon', event, props.item);
5548
event.stopPropagation();
5649
};
57-
const contentsClick = (event: event) => {
50+
const contentsClick = (event: Event) => {
5851
emit('itemClick', event, props.item);
5952
event.stopPropagation();
6053
};
@@ -68,7 +61,3 @@ export default create({
6861
}
6962
});
7063
</script>
71-
72-
<style lang="scss">
73-
/* @import './index.scss'; */
74-
</style>

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

-146
This file was deleted.

0 commit comments

Comments
 (0)