104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<template>
|
|
<div class="c-custom-img-warp">
|
|
<el-image :src="isMontage ? (getAssetsFile(imgUrl)?.href ?? '') : imgUrl" :fit="fit" />
|
|
<div v-if="isViewVal" class="viewer-btn-warp">
|
|
<div class="viewer-btn" @click="toPreview">点击查看</div>
|
|
</div>
|
|
|
|
<el-image-viewer
|
|
v-if="isViewVal && isPreview"
|
|
:url-list="srcList"
|
|
show-progress
|
|
:initial-index="0"
|
|
:teleported="true"
|
|
@close="isPreview = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, watch, nextTick, reactive } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
const props = defineProps({
|
|
url: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
previewList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
isView: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isMontage: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
fit: {
|
|
type: String,
|
|
default: 'none',
|
|
},
|
|
});
|
|
|
|
let imgUrl = ref(props.url);
|
|
let isViewVal = ref(props.isView);
|
|
let srcList = reactive(props.previewList);
|
|
|
|
watch(
|
|
() => (props.url, props.previewList, props.isView),
|
|
() => {
|
|
imgUrl.value = props.url;
|
|
isViewVal.value = props.isView;
|
|
srcList = props.previewList;
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
const isPreview = ref(false);
|
|
const toPreview = () => {
|
|
isPreview.value = true;
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.c-custom-img-warp {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
::v-deep() {
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.viewer-btn-warp {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
display: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
transform: translateY(-50%);
|
|
}
|
|
.viewer-btn {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
border-radius: 16px;
|
|
color: $color-fff;
|
|
background: $color-balck-mask;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.c-custom-img-warp:hover {
|
|
.viewer-btn-warp {
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
</style>
|