Skip to content

Commit

Permalink
fix(upload): 上传组件图片展示样式优化 (#4853)
Browse files Browse the repository at this point in the history 
* fix(upload): 上传组件图片展示样式优化

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@huangchen1031 @github-actions
huangchen1031 and github-actions[bot] authored Dec 21, 2024
1 parent c0a98ad commit 975d3cc
Show file tree
Hide file tree
Showing 6 changed files with 20 additions and 14 deletions.
2 changes: 1 addition & 1 deletion src/date-picker/__tests__/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,4 +201,4 @@ exports[`DatePicker > :value 1`] = `
<!---->
</div>
</div>
`;
`;
6 changes: 3 additions & 3 deletions src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1213,7 +1213,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src=""
/>
Expand Down Expand Up @@ -1308,7 +1308,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://img1.txt"
/>
Expand Down Expand Up @@ -1425,7 +1425,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://img2.txt"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/upload/themes/image-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default defineComponent({
const renderMainContent = (file: UploadFile, index: number) => {
return (
<div class={`${classPrefix.value}-upload__card-content ${classPrefix.value}-upload__card-box`}>
<Image class={`${classPrefix.value}-upload__card-image`} src={file.url || file.raw} error="" />
<Image class={`${classPrefix.value}-upload__card-image`} src={file.url || file.raw} error="" fit="contain" />
<div class={`${classPrefix.value}-upload__card-mask`}>
<span class={`${classPrefix.value}-upload__card-mask-item`} onClick={(e) => e.stopPropagation()}>
<ImageViewer
Expand Down
8 changes: 7 additions & 1 deletion src/upload/themes/multiple-flow-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,13 @@ export default defineComponent({
</div>
)}
{(['waiting', 'success'].includes(file.status) || (!file.status && file.url)) && (
<Image class={`${uploadPrefix.value}__card-image`} src={file.url || file.raw} error="" loading="" />
<Image
class={`${uploadPrefix.value}__card-image`}
src={file.url || file.raw}
error=""
loading=""
fit="contain"
/>
)}
<div class={`${uploadPrefix.value}__card-mask`}>
{(file.url || file.raw) && !['progress', 'fail'].includes(file.status) && (
Expand Down
10 changes: 5 additions & 5 deletions test/unit/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64662,7 +64662,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/disabled.vue 1`] = `
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://tdesign.gtimg.com/site/avatar.jpg"
/>
Expand Down Expand Up @@ -198237,7 +198237,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://tdesign.gtimg.com/demo/demo-image-1.png"
/>
Expand Down Expand Up @@ -198625,7 +198625,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://tdesign.gtimg.com/demo/demo-image-1.png"
/>
Expand Down Expand Up @@ -198884,7 +198884,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://tdesign.gtimg.com/demo/demo-image-1.png"
/>
Expand Down Expand Up @@ -199001,7 +199001,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
<!---->
<img
alt=""
class="t-image t-image--fit-fill t-image--position-center"
class="t-image t-image--fit-contain t-image--position-center"
referrerpolicy="strict-origin-when-cross-origin"
src="https://tdesign.gtimg.com/demo/demo-image-1.png"
/>
Expand Down
Loading

0 comments on commit 975d3cc

Please sign in to comment.