You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.2 KiB
88 lines
2.2 KiB
<template>
|
|
<component :is="render" />
|
|
</template>
|
|
<script setup lang="jsx">
|
|
import { ElImage } from 'element-plus/es/components/image/index';
|
|
import 'element-plus/es/components/image/style/css';
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
default: 'none',
|
|
},
|
|
alt: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: 'auto',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: 'auto',
|
|
},
|
|
fit: {
|
|
type: String,
|
|
default: 'contain',
|
|
},
|
|
zIndex: {
|
|
type: Number,
|
|
default: 9999,
|
|
},
|
|
hideOnClickModal: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
lazy: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
previewSrcList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
previewTeleported: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
const slots = useSlots();
|
|
const attrs = useAttrs();
|
|
const imageSlots = {
|
|
placeholder: () => (
|
|
<div class="image-slot">
|
|
<ElIcon name="Picture" size="20" />
|
|
</div>
|
|
),
|
|
error: () => (
|
|
<div class="image-slot">
|
|
<ElIcon name="file-damage-fill" size="20" />
|
|
</div>
|
|
),
|
|
...slots,
|
|
};
|
|
if (props.previewSrcList?.length === 0) {
|
|
props.previewSrcList.push(props.src);
|
|
}
|
|
const width = computed(() => props.width);
|
|
const height = computed(() => props.height);
|
|
const render = () => <ElImage {...props} {...attrs} v-slots={imageSlots} />;
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.el-image {
|
|
width: v-bind(width);
|
|
height: v-bind(height);
|
|
:deep(.image-slot) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f5f7fa;
|
|
color: var(--el-text-color-secondary);
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
</style>
|