Skip to content

Commit

Permalink
feat: 地址组件新增功能 #2101 (#2113)
Browse files Browse the repository at this point in the history 
* feat: tour更新

* feat: 文档修改

* feat: 插槽修改

* feat: noticebar发布

* feat: 文档更新

* fix: ellipsis修改

* fix: 修改 ellipsis

* feat: tour修改

* fix: 地址组件问题修改

* fix: imagepreview修改

* feat: 新增4.0介绍

* fix: 公告栏修改插槽使用不更新问题

* fix: 公告栏组件 demo 修改

* fix: 地址组件新增功能
  • Loading branch information
@yangxiaolu1993
yangxiaolu1993 authored Feb 13, 2023
1 parent d4a3b70 commit 9b6888a
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/packages/__VUE/address/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
.nut-address__detail-list {
padding-top: 15px;
height: 270px;
overflow-y: auto;
// overflow-y: auto;
box-sizing: border-box;
padding: 0;
.nut-address__detail-item {
Expand Down
60 changes: 43 additions & 17 deletions src/packages/__VUE/address/index.taro.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,22 @@
</view>

<view class="nut-address__detail" v-if="privateType == 'custom'">
<ul class="nut-address__detail-list">
<li
v-for="(item, index) in regionList"
:key="index"
:class="['nut-address__detail-item', selectedRegion[tabIndex]?.id == item.id ? 'active' : '']"
@click="nextAreaList(item)"
>
<div>
<slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
<Check class="nut-address-select-icon" width="13px"></Check> </slot
>{{ item.name }}
<div class="nut-address__detail-list">
<NutScrollView :scroll-y="true" :style="{ height: '100%' }" :scroll-top="scrollTop" @scroll="scrollChange">
<div
v-for="(item, index) in regionList"
:key="index"
:class="['nut-address__detail-item', selectedRegion[tabIndex]?.id == item.id ? 'active' : '']"
@click="nextAreaList(item)"
>
<div>
<slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
<Check class="nut-address-select-icon" width="13px"></Check> </slot
>{{ item.name }}
</div>
</div>
</li>
</ul>
</NutScrollView>
</div>
</view>
<view class="nut-address__elevator-group" v-else>
Expand Down Expand Up @@ -124,6 +126,7 @@ import { reactive, ref, toRefs, watch, computed, PropType } from 'vue';
import { popupProps } from '../popup/props';
import { RegionData, CustomRegionData, existRegionData } from './type';
import { createComponent } from '@/packages/utils/create';
import NutScrollView from '../scrollView/index.taro.vue';
import Popup from '../popup/index.taro.vue';
import Elevator from '../elevator/index.taro.vue';
const { create, componentName, translate } = createComponent('address');
Expand All @@ -137,7 +140,8 @@ export default create({
Location2,
Check,
Close,
Left
Left,
NutScrollView
},
inheritAttrs: false,
props: {
Expand Down Expand Up @@ -192,7 +196,7 @@ export default create({
},
height: {
type: [String, Number],
default: '200px'
default: '200'
},
columnsPlaceholder: {
type: [String, Array],
Expand All @@ -218,7 +222,10 @@ export default create({
const showPopup = ref(props.visible);
const privateType = ref(props.type);
const tabIndex = ref(0);
const prevTabIndex = ref(0);
const tabName = ref(['province', 'city', 'country', 'town']);
const scrollDis = ref([0, 0, 0, 0]);
const scrollTop = ref(0);
const regionList = computed(() => {
switch (tabIndex.value) {
Expand Down Expand Up @@ -301,6 +308,7 @@ export default create({
}
selectedRegion.value[index] = arr.filter((item: RegionData) => item.id == defaultValue[index])[0];
}
scrollTo();
}
};
Expand Down Expand Up @@ -328,7 +336,7 @@ export default create({
// 切换下一级列表
const nextAreaList = (item: RegionData) => {
const tab = tabIndex.value;
prevTabIndex.value = tabIndex.value;
const callBackParams: {
next?: string;
value?: RegionData;
Expand All @@ -349,18 +357,33 @@ export default create({
callBackParams.value = item;
emit('change', callBackParams);
scrollTo();
} else {
handClose();
emit('update:modelValue');
}
};
//切换地区Tab
const changeRegionTab = (item: RegionData, index: number) => {
prevTabIndex.value = tabIndex.value;
if (getTabName(item, index)) {
tabIndex.value = index;
scrollTo();
}
};
const scrollChange = (e: any) => {
scrollDis.value[tabIndex.value] = e.detail.scrollTop;
};
const scrollTo = () => {
setTimeout(() => {
console.log(scrollDis.value, tabIndex.value);
scrollTop.value = scrollDis.value[tabIndex.value];
});
};
// 选择现有地址
const selectedExist = (item: existRegionData) => {
const copyExistAdd = props.existAddress;
Expand All @@ -383,6 +406,7 @@ export default create({
const initAddress = () => {
selectedRegion.value = [];
tabIndex.value = 0;
scrollTo();
};
// 关闭
Expand Down Expand Up @@ -475,7 +499,9 @@ export default create({
...toRefs(props),
...toRefs(tabItemRef),
translate,
transformData
transformData,
scrollTop,
scrollChange
};
}
});
Expand Down
28 changes: 25 additions & 3 deletions src/packages/__VUE/address/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
</view>

<view class="nut-address__detail" v-if="privateType == 'custom'">
<ul class="nut-address__detail-list">
<ul class="nut-address__detail-list" ref="scrollDom">
<li
v-for="(item, index) in regionList"
:key="index"
Expand Down Expand Up @@ -202,7 +202,10 @@ export default create({
const showPopup = ref(props.visible);
const privateType = ref(props.type);
const tabIndex = ref(0);
const prevTabIndex = ref(0);
const tabName = ref(['province', 'city', 'country', 'town']);
const scrollDom = ref<null | HTMLElement>(null);
const scrollDis = ref([0, 0, 0, 0]);
const regionList = computed(() => {
switch (tabIndex.value) {
Expand Down Expand Up @@ -297,6 +300,8 @@ export default create({
};
const lineAnimation = () => {
scrollTo();
nextTick(() => {
const name = tabRegion.value && tabRegion.value.getElementsByClassName('active')[0];
if (name) {
Expand All @@ -308,7 +313,7 @@ export default create({
const nextAreaList = (item: RegionData) => {
const tab = tabIndex.value;
prevTabIndex.value = tabIndex.value;
const callBackParams: {
next?: string;
value?: RegionData;
Expand Down Expand Up @@ -338,12 +343,28 @@ export default create({
};
const changeRegionTab = (item: RegionData, index: number) => {
prevTabIndex.value = tabIndex.value;
if (getTabName(item, index)) {
tabIndex.value = index;
lineAnimation();
}
};
const scrollTo = () => {
const dom = scrollDom.value;
const prev = prevTabIndex.value;
const cur = scrollDis.value[tabIndex.value];
dom?.scrollTop && (scrollDis.value[prev] = dom?.scrollTop);
nextTick(() => {
dom?.scrollTo({
top: cur,
behavior: 'auto'
});
});
};
const selectedExist = (item: existRegionData) => {
const copyExistAdd = props.existAddress;
let prevExistAdd = {};
Expand Down Expand Up @@ -467,7 +488,8 @@ export default create({
...toRefs(props),
translate,
regionList,
transformData
transformData,
scrollDom
};
}
});
Expand Down
1 change: 1 addition & 0 deletions src/packages/__VUE/elevator/index.taro.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export default create({
});
const fixedStyle = computed(() => {
console.log(11, state.listHeight, state.listGroup);
return {
height: `${state.listHeight[state.listGroup.length - 1]}px`
};
Expand Down

0 comments on commit 9b6888a

Please sign in to comment.