40 lines
600 B
Vue
40 lines
600 B
Vue
<template>
|
|
<div v-lazy:background-image="image" class="image" @click="onClick">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
image: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
onClick: {
|
|
type: Function,
|
|
default: f => f
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.image {
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background-size: cover;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
will-change: opacity;
|
|
|
|
&[lazy="loaded"] {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|