50 lines
785 B
Vue
50 lines
785 B
Vue
<template>
|
|
<div class="preview-panel">
|
|
<img :src="item.previewUrl || item.icon" :alt="item.name" :class="{'shadow': item.previewUrl }" @error="iconError($event)"/>
|
|
<p>{{ item.name }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'PreviewPanel',
|
|
props: {
|
|
item: Object,
|
|
fallbackIcon: String
|
|
},
|
|
methods: {
|
|
iconError(event) {
|
|
event.target.src = this.fallbackIcon;
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.preview-panel {
|
|
padding: 0 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.preview-panel > img {
|
|
min-width: 90%;
|
|
max-width: 256px;
|
|
margin: auto;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 2px 5px rgba(0,0,0,.2);
|
|
}
|
|
|
|
.preview-panel > p {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
</style> |