60 lines
1.0 KiB
Vue
60 lines
1.0 KiB
Vue
<template>
|
|
<div class="image-link-preview">
|
|
<el-image
|
|
:src="$getImageURL(valueObj.image)"
|
|
:zoom-rate="1.2"
|
|
:max-scale="3"
|
|
:min-scale="0.5"
|
|
:preview-src-list="[$getImageURL(valueObj.image)]"
|
|
:preview-teleported="true"
|
|
:hide-on-click-modal="true"
|
|
:initial-index="0"
|
|
fit="cover"
|
|
/>
|
|
<p>{{ valueObj.link }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'ImageLinkPreview',
|
|
props: {
|
|
value: {
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
valueObj () {
|
|
return JSON.parse(this.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.image-link-preview {
|
|
width: 150px;
|
|
height: 120px;
|
|
position: relative;
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
p {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
padding: 3px 5px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|