alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: image component

Browse Source
This commit is contained in:
chenjiahan
2020-07-05 08:33:36 +08:00
parent 12faaa2179
commit b79e59bc18
15 changed files with 1041 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-next/image/test/__snapshots__/demo.spec.js.snap
+129
View File
@@ -0,0 +1,129 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-row">
<div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
</div>
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">scale-down</div>
</div>
</div>
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">scale-down</div>
</div>
</div>
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
<div class="text">自定义提示</div>
</div>
</div>
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<div class="text">自定义提示</div>
</div>
</div>
</div>
</div>
`;
src-next/image/test/__snapshots__/index.spec.js.snap
+58
View File
@@ -0,0 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`default slot 1`] = `
<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>Custom Default
</div>
`;
exports[`error-icon prop 1`] = `
<div class="van-image">
<div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
<!----></i></div>
</div>
`;
exports[`lazy load 1`] = `
<div class="van-image"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`lazy-load error event 1`] = `
<div class="van-image">
<div class="van-image__error"><i class="van-icon van-icon-warning-o van-image__error-icon">
<!----></i></div>
</div>
`;
exports[`lazy-load load event 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>`;
exports[`load event 2`] = `
<div class="van-image"><img src="" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`loading-icon prop 1`] = `
<div class="van-image"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-success van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`radius prop 1`] = `
<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
`;
exports[`show-error prop 1`] = `<div class="van-image"></div>`;
exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;