blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(RollingText): should render correctly when changing height prop (#11994)

Browse Source
This commit is contained in:
inottn 2023-06-23 17:06:10 +08:00 committed by GitHub
parent 6b8a83eefc
commit 00da05be47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/vant/src/rolling-text/RollingTextItem.tsx
View File

@ -34,28 +34,26 @@ export default defineComponent({
? props.figureArr.slice().reverse() ? props.figureArr.slice().reverse()
: props.figureArr : props.figureArr
); );
const totalHeight = computed( const translatePx = computed(() => {
() => props.height * props.figureArr.length - props.height const totalHeight = props.height * (props.figureArr.length - 1);
); return `-${totalHeight}px`;
const translateValPx = computed(() => `-${totalHeight.value}px`); });
const itemStyle = computed(() => ({
const itemStyleObj = {
lineHeight: addUnit(props.height), lineHeight: addUnit(props.height),
}; }));
const rootStyle = computed(() => ({
const getStyle = () => ({
height: addUnit(props.height), height: addUnit(props.height),
'--van-translate': translateValPx.value, '--van-translate': translatePx.value,
'--van-duration': props.duration + 's', '--van-duration': props.duration + 's',
'--van-delay': props.delay + 's', '--van-delay': props.delay + 's',
}); }));
return () => ( return () => (
<div class={bem([props.direction])} style={getStyle()}> <div class={bem([props.direction])} style={rootStyle.value}>
<div class={bem('box', { animate: props.isStart })}> <div class={bem('box', { animate: props.isStart })}>
{Array.isArray(newFigureArr.value) && {Array.isArray(newFigureArr.value) &&
newFigureArr.value.map((figure) => ( newFigureArr.value.map((figure) => (
<div class={bem('item')} style={itemStyleObj}> <div class={bem('item')} style={itemStyle.value}>
{figure} {figure}
</div> </div>
))} ))}