mirror of
https://github.com/element-plus/element-plus.git
synced 2025-12-19 09:09:40 +08:00
0ff86060ab
* feat(components): [image-viewer] add custom failed content * Update packages/components/image-viewer/src/image-viewer.vue Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com> * feat: rename error slot * test: add custom load failed slot tests for Image and ImageViewer * docs: perf dome * fix: update v * feat: add activeIndex and src properties * fix: add key binding to img element for better reactivity * fix: keep original structure * fix: restore error source in image load-failed example * feat: add image preview * refactor: remove unused var * fix: update demo * chore: better contrast for dark mode --------- Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com> Co-authored-by: Dsaquel <291874700n@gmail.com>
83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<div class="demo-image__error" flex gap-2>
|
|
<el-image />
|
|
<el-image>
|
|
<template #error>
|
|
<div class="image-viewer-slot image-slot">
|
|
<el-icon><icon-picture /></el-icon>
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
<el-image :src="url" :preview-src-list="srcList" show-progress>
|
|
<template #viewer-error="{ activeIndex, src }">
|
|
<div class="image-slot viewer-error">
|
|
<el-icon><icon-picture /></el-icon>
|
|
<span>
|
|
this is viewer-error slot. current index: {{ activeIndex }}. src:
|
|
{{ src }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
<el-button @click="showPreview = true"> preview controlled </el-button>
|
|
|
|
<el-image-viewer
|
|
v-if="showPreview"
|
|
show-progress
|
|
:url-list="srcList"
|
|
@close="showPreview = false"
|
|
>
|
|
<template #viewer-error="{ activeIndex, src }">
|
|
<div class="image-slot viewer-error">
|
|
<el-icon><icon-picture /></el-icon>
|
|
<span>
|
|
this is viewer-error slot. current index: {{ activeIndex }}. src:
|
|
{{ src }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</el-image-viewer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Picture as IconPicture } from '@element-plus/icons-vue'
|
|
|
|
const showPreview = ref(false)
|
|
|
|
const srcList = [
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
|
'https://errorSrc',
|
|
]
|
|
const url =
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-image__error .el-image {
|
|
max-width: 300px;
|
|
max-height: 200px;
|
|
width: 100%;
|
|
}
|
|
|
|
.demo-image__error .image-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size: 30px;
|
|
height: 200px;
|
|
background: #fff;
|
|
}
|
|
.demo-image__error .image-slot .el-icon {
|
|
font-size: 30px;
|
|
}
|
|
.image-viewer-slot {
|
|
background: var(--el-fill-color-light);
|
|
}
|
|
.viewer-error {
|
|
color: #000;
|
|
}
|
|
</style>
|