Skip to content

Commit

Permalink
fix: 修复current动态更新问题 (#1404)
Browse files Browse the repository at this point in the history 
* fix: 修复current动态更新问题

* fix: 更新test

* fix: 修复v-model
  • Loading branch information
@zuiaiwanqian
zuiaiwanqian authored May 31, 2024
1 parent 3c010b4 commit 15e2dac
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 21 files
+0 −21 docs/mobile/api_v2/col.en-US.md
+0 −21 docs/mobile/api_v2/col.md
+0 −4 docs/mobile/api_v2/count-down.en-US.md
+0 −3 docs/mobile/api_v2/count-down.md
+4 −4 docs/web/api/upload.en-US.md
+4 −4 docs/web/api/upload.md
+0 −79 js/drawer/utils.ts
+1 −1 js/input-number/number.ts
+0 −5 js/time-picker/utils.ts
+0 −11 style/mobile/components/col/v2/_index.less
+0 −11 style/mobile/components/col/v2/_mixin.less
+1 −1 style/mobile/components/count-down/v2/_index.less
+3 −17 style/mobile/components/count-down/v2/_var.less
+0 −8 style/mobile/components/row/v2/_index.less
+0 −1 style/web/components/cascader/_index.less
+1 −0 style/web/components/input/_mixin.less
+1 −4 style/web/components/menu/_index.less
+0 −5 style/web/components/range-input/_index.less
+1 −1 style/web/components/range-input/_var.less
+1 −1 style/web/components/select/_index.less
+2 −7 style/web/components/upload/_index.less
127 changes: 124 additions & 3 deletions src/swiper/__test__/__snapshots__/demo.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -865,9 +865,130 @@ exports[`Swiper > Swiper mobileVue demo works fine 1`] = `
</div>
</div>
<!-- &lt;tdesign-demo-block summary="卡片模式"&gt;
&lt;card /&gt;
&lt;/tdesign-demo-block&gt; -->
<div
class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
>
<div
class="tdesign-mobile-demo-block__header"
>
<!--v-if-->
<p
class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
>
手动跳转（current）
</p>
</div>
<div
class="tdesign-mobile-demo-block__slot"
>
<div
style="padding: 0px 16px;"
>
<div
class="t-swiper t-swiper--default"
>
<div
class="t-swiper__container"
style="flex-direction: row; transition: none; height: auto;"
>
<div
class="t-swiper-item"
style="height: 192px;"
>
<img
class="img"
src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
/>
</div>
<div
class="t-swiper-item"
style="height: 192px;"
>
<img
class="img"
src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
/>
</div>
<div
class="t-swiper-item"
style="height: 192px;"
>
<img
class="img"
src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
/>
</div>
<div
class="t-swiper-item"
style="height: 192px;"
>
<img
class="img"
src="https://tdesign.gtimg.com/mobile/demos/swiper2.png"
/>
</div>
<div
class="t-swiper-item"
style="height: 192px;"
>
<img
class="img"
src="https://tdesign.gtimg.com/mobile/demos/swiper1.png"
/>
</div>
</div>
<!---->
<span
class="t-swiper-nav--horizontal t-swiper-nav__dots t-swiper-nav--bottom"
>
<!---->
</span>
</div>
<div
class="tdesign-demo-block-row"
>
<button
aria-disabled="false"
class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
role="button"
type="button"
>
<!---->
<span
class="t-button__content"
>
跳转到第 2 项
</span>
<!---->
</button>
</div>
</div>
</div>
</div>
<div
class="tdesign-mobile-demo-block"
>
Expand Down
49 changes: 49 additions & 0 deletions src/swiper/demos/current.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template>
<div style="padding: 0 16px">
<t-swiper
:navigation="{ type: 'dots' }"
:autoplay="true"
:current="current"
@click="handleClick"
@change="handleChange"
>
<t-swiper-item v-for="(item, index) in swiperList" :key="index" style="height: 192px">
<img :src="item" class="img" />
</t-swiper-item>
</t-swiper>
<div class="tdesign-demo-block-row">
<t-button size="small" theme="primary" @click="current = current + 2 > 5 ? 0 : current + 1">
跳转到第 {{ current + 2 >= 6 ? 1 : current + 2 }} 项
</t-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
`${imageCdn}/swiper1.png`,
`${imageCdn}/swiper2.png`,
`${imageCdn}/swiper1.png`,
`${imageCdn}/swiper2.png`,
`${imageCdn}/swiper1.png`,
];
const current = ref(0);
const handleChange = (index: number, context: any) => {
console.log('基础示例,页数变化到》》》', index, context);
};
const handleClick = (value: number) => {
console.log('click: ', value);
};
</script>

<style>
img {
display: block;
width: 100%;
height: 192px;
}
</style>
7 changes: 4 additions & 3 deletions src/swiper/demos/mobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<tdesign-demo-block summary="切换按钮（controls）">
<control />
</tdesign-demo-block>
<!-- <tdesign-demo-block summary="卡片模式">
<card />
</tdesign-demo-block> -->
<tdesign-demo-block summary="手动跳转（current）">
<current />
</tdesign-demo-block>
<tdesign-demo-block title="02 组件样式" summary="垂直模式">
<vertical />
</tdesign-demo-block>
Expand All @@ -33,6 +33,7 @@ import control from './control.vue';
import card from './card.vue';
import vertical from './vertical.vue';
import outside from './outside.vue';
import current from './current.vue';
</script>

<style lang="less">
Expand Down
35 changes: 21 additions & 14 deletions src/swiper/swiper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,8 @@ export default defineComponent({

const root = ref();
const items = ref<any>([]);

const { current: value, modelValue } = toRefs(props);

const [current, setCurrent] = useVModel(value, modelValue, props.defaultCurrent);
const [currentIndex, setCurrent] = useVModel(value, modelValue, props.defaultCurrent);
const swiperContainer = ref<HTMLElement | null>(null);

const animating = ref(false);
Expand Down Expand Up @@ -76,12 +74,12 @@ export default defineComponent({
let autoplayTimer: any = null;

const onItemClick = () => {
props.onClick?.(current.value ?? 0);
props.onClick?.(currentIndex.value ?? 0);
};

const move = (step: number, source: SwiperChangeSource, isReset = false) => {
animating.value = true;
processIndex(isReset ? step : (current.value as number) + step, source);
processIndex(isReset ? step : (currentIndex.value as number) + step, source);

const moveDirection = !isVertical.value ? 'X' : 'Y';
const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
Expand All @@ -104,7 +102,6 @@ export default defineComponent({
};

const startAutoplay = () => {
if (typeof props.current === 'number') return false;
if (!props?.autoplay || autoplayTimer !== null) return false; // stop repeat autoplay
autoplayTimer = setInterval(() => {
goNext('autoplay');
Expand All @@ -131,6 +128,7 @@ export default defineComponent({
val = props.loop ? 0 : max - 1;
}
setCurrent(val);
context.emit('update:current', val);
context.emit('change', val, { source });
};

Expand Down Expand Up @@ -172,7 +170,7 @@ export default defineComponent({
} else if ((!isVertical.value && distanceX > 100) || (isVertical.value && distanceY > 100)) {
move(1, 'touch');
} else {
move(current.value as number, 'touch', true);
move(currentIndex.value as number, 'touch', true);
}
startAutoplay();
};
Expand All @@ -185,33 +183,42 @@ export default defineComponent({
const index = items.value.findIndex((item: any) => item.uid === uid);
items.value.splice(index, 1);

if (current.value + 1 > items.value.length) {
if (currentIndex.value + 1 > items.value.length) {
goNext('autoplay');
}
};

const updateItemPosition = () => {
items.value.forEach((item: any, index: number) => {
item.calcTranslateStyle(index, current.value);
item.calcTranslateStyle(index, currentIndex.value);
});
};

const setContainerHeight = (height: number | string) =>
(containerHeight.value = isNumber(height) ? `${height}px` : height);

const updateContainerHeight = () => {
const target = items.value[current.value ?? 0];
const target = items.value[currentIndex.value ?? 0];
const rect = target?.proxy?.$el.getBoundingClientRect();

if (props.height) {
setContainerHeight(props.height);
} else if (rect) {
setContainerHeight(rect.height);
}
updateItemPosition();
};

watch(current, updateContainerHeight);
watch(currentIndex, updateContainerHeight);
watch(
() => props.current,
() => {
// v-model动态更新时不触发move逻辑
if (props.current === currentIndex.value) return;
stopAutoplay();
move(props.current - currentIndex.value, 'autoplay');
startAutoplay();
},
);

provide('parent', {
loop: props.loop,
Expand Down Expand Up @@ -257,7 +264,7 @@ export default defineComponent({
key={`page${index}`}
class={[
`${navName}__${navigation.value?.type}-item`,
index === current.value ? `${navName}__${navigation.value?.type}-item--active` : '',
index === currentIndex.value ? `${navName}__${navigation.value?.type}-item--active` : '',
`${navName}__${navigation.value?.type}-item--${props.direction}`,
]}
/>
Expand All @@ -269,7 +276,7 @@ export default defineComponent({
// fraction
const fraction = () => {
if (navigation.value?.type === 'fraction') {
return <span>{`${(current.value ?? 0) + 1}/${items.value.length}`}</span>;
return <span>{`${(currentIndex.value ?? 0) + 1}/${items.value.length}`}</span>;
}
};
return (
Expand Down

0 comments on commit 15e2dac

Please sign in to comment.