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(Swipe): incorrect size during ssr (#7821)

Browse Source
This commit is contained in:
neverland 2020-12-26 15:18:28 +08:00 committed by GitHub
parent b89832c03e
commit 76aa0e5dd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/image-preview/test/__snapshots__/index.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`close-icon prop 1`] = `
<div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right"> <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right">
<!----></i> <!----></i>
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">1 / 0</div> <div class="van-image-preview__index">1 / 0</div>
</div> </div>
@ -14,7 +14,7 @@ exports[`close-icon-position prop 1`] = `
<div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left"> <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left">
<!----></i> <!----></i>
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">1 / 0</div> <div class="van-image-preview__index">1 / 0</div>
</div> </div>
@ -23,7 +23,7 @@ exports[`close-icon-position prop 1`] = `
exports[`cover slot 1`] = ` exports[`cover slot 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">1 / 0</div> <div class="van-image-preview__index">1 / 0</div>
<div class="van-image-preview__cover">Custom Cover Content</div> <div class="van-image-preview__cover">Custom Cover Content</div>
@ -33,7 +33,7 @@ exports[`cover slot 1`] = `
exports[`index slot 1`] = ` exports[`index slot 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">Custom Index</div> <div class="van-image-preview__index">Custom Index</div>
</div> </div>
@ -42,10 +42,10 @@ exports[`index slot 1`] = `
exports[`render image 1`] = ` exports[`render image 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"> <div class="van-swipe__track" style="transition-duration: 500ms; transform: translateX(0px);">
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div> <div class="van-swipe-item van-image-preview__swipe-item"></div>
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div> <div class="van-swipe-item van-image-preview__swipe-item"></div>
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div> <div class="van-swipe-item van-image-preview__swipe-item"></div>
</div> </div>
</div> </div>
<div class="van-image-preview__index">1 / 3</div> <div class="van-image-preview__index">1 / 3</div>
@ -55,7 +55,7 @@ exports[`render image 1`] = `
exports[`set show-index prop to false 1`] = ` exports[`set show-index prop to false 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);"></div>
</div> </div>
</div> </div>
`; `;

8
src/notice-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -57,10 +57,10 @@ exports[`renders demo correctly 1`] = `
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;"> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
<div class="notice-swipe van-swipe"> <div class="notice-swipe van-swipe">
<div class="van-swipe__track van-swipe__track--vertical" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);"> <div class="van-swipe__track van-swipe__track--vertical" style="transition-duration: 0ms; transform: translateY(0px);">
<div class="van-swipe-item" style="height: 0px;">内容 1</div> <div class="van-swipe-item">内容 1</div>
<div class="van-swipe-item" style="height: 0px;">内容 2</div> <div class="van-swipe-item">内容 2</div>
<div class="van-swipe-item" style="height: 0px;">内容 3</div> <div class="van-swipe-item">内容 3</div>
</div> </div>
</div> </div>
</div> </div>

4
src/swipe-item/index.js
View File

@ -25,7 +25,9 @@ export default createComponent({
const style = {}; const style = {};
const { size, vertical } = this.parent; const { size, vertical } = this.parent;
style[vertical ? 'height' : 'width'] = `${size}px`; if (size) {
style[vertical ? 'height' : 'width'] = `${size}px`;
}
if (this.offset) { if (this.offset) {
style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`; style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;

16
src/swipe/index.js
View File

@ -124,15 +124,19 @@ export default createComponent({
}, },
trackStyle() { trackStyle() {
const mainAxis = this.vertical ? 'height' : 'width'; const style = {
const crossAxis = this.vertical ? 'width' : 'height';
return {
[mainAxis]: `${this.trackSize}px`,
[crossAxis]: this[crossAxis] ? `${this[crossAxis]}px` : '',
transitionDuration: `${this.swiping ? 0 : this.duration}ms`, transitionDuration: `${this.swiping ? 0 : this.duration}ms`,
transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)`, transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)`,
}; };
if (this.size) {
const mainAxis = this.vertical ? 'height' : 'width';
const crossAxis = this.vertical ? 'width' : 'height';
style[mainAxis] = `${this.trackSize}px`;
style[crossAxis] = this[crossAxis] ? `${this[crossAxis]}px` : '';
}
return style;
}, },
indicatorStyle() { indicatorStyle() {

12
src/swipe/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);"> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<div class="van-swipe-item" style="width: 100px;">1</div> <div class="van-swipe-item" style="width: 100px;">1</div>
<div class="van-swipe-item" style="width: 100px;">2</div> <div class="van-swipe-item" style="width: 100px;">2</div>
<div class="van-swipe-item" style="width: 100px;">3</div> <div class="van-swipe-item" style="width: 100px;">3</div>
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);"> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div> <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div> <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div> <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);"> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<div class="van-swipe-item" style="width: 100px;">1</div> <div class="van-swipe-item" style="width: 100px;">1</div>
<div class="van-swipe-item" style="width: 100px;">2</div> <div class="van-swipe-item" style="width: 100px;">2</div>
<div class="van-swipe-item" style="width: 100px;">3</div> <div class="van-swipe-item" style="width: 100px;">3</div>
@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="demo-swipe--vertical van-swipe" style="height: 200px;"> <div class="demo-swipe--vertical van-swipe" style="height: 200px;">
<div class="van-swipe__track van-swipe__track--vertical" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);"> <div class="van-swipe__track van-swipe__track--vertical" style="transition-duration: 0ms; transform: translateY(0px); height: 400px;">
<div class="van-swipe-item" style="height: 100px;">1</div> <div class="van-swipe-item" style="height: 100px;">1</div>
<div class="van-swipe-item" style="height: 100px;">2</div> <div class="van-swipe-item" style="height: 100px;">2</div>
<div class="van-swipe-item" style="height: 100px;">3</div> <div class="van-swipe-item" style="height: 100px;">3</div>
@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div class="van-swipe__track" style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);"> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 1200px;">
<div class="van-swipe-item" style="width: 300px;">1</div> <div class="van-swipe-item" style="width: 300px;">1</div>
<div class="van-swipe-item" style="width: 300px;">2</div> <div class="van-swipe-item" style="width: 300px;">2</div>
<div class="van-swipe-item" style="width: 300px;">3</div> <div class="van-swipe-item" style="width: 300px;">3</div>
@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);"> <div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<div class="van-swipe-item" style="width: 100px;">1</div> <div class="van-swipe-item" style="width: 100px;">1</div>
<div class="van-swipe-item" style="width: 100px;">2</div> <div class="van-swipe-item" style="width: 100px;">2</div>
<div class="van-swipe-item" style="width: 100px;">3</div> <div class="van-swipe-item" style="width: 100px;">3</div>