From 2eac4588d9a6397592e8d57a72da8cb0743c2502 Mon Sep 17 00:00:00 2001 From: ManjaroOne666 Date: Tue, 22 Jan 2019 12:54:21 +0000 Subject: [PATCH] image swap logic implemented --- components/BackgroundImageLoader.vue | 78 +++++++++++++++++++++------- 1 file changed, 59 insertions(+), 19 deletions(-) diff --git a/components/BackgroundImageLoader.vue b/components/BackgroundImageLoader.vue index b55d59e..a53d3ca 100644 --- a/components/BackgroundImageLoader.vue +++ b/components/BackgroundImageLoader.vue @@ -1,10 +1,16 @@ @@ -16,42 +22,62 @@ export default { mixins: [ imageLoader ], props: { - bgLoading: { + imageUrl: { type: String, required: false, default: function () { - return 'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)' - } - }, - img: { - type: String, - required: false, - default: function () { - return 'url(https://via.placeholder.com/1920x1080)' + return null } }, }, data () { return { + loadedImageUrl: null, } }, computed: { - loadingStyle () { + backgroundDefaultStyle () { return { - background: this.bgLoading + background: 'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)' } }, backgroundStyle () { - return { - backgroundImage: this.img + let style = {} + if (this.loadedImageUrl) { + style.backgroundImage = `url(${this.loadedImageUrl})` } + + return style } }, + watch: { + imageUrl () { + if (this.imageUrl) { + this.setImage(this.imageUrl) + } + }, + }, + + mounted () { + this.setImage(this.imageUrl) + }, + methods: { - } + setImage(url) { + if (url === null) { return } + this.loadImage(url) + .then(img => { + this.loadedImageUrl = img.src + this.$emit('imageLoaded', img) + }) + .catch(err => { + this.$emit('imageLoadError', err) + }) + }, + }, } @@ -74,6 +100,20 @@ export default { .background-img { background-size: cover; background-position: center center; - opacity: .5; + opacity: 1; +} + +.fade { + &-enter-active { + transition: opacity 2s 1s; + } + + &-leave-active { + transition: opacity 3s; + } + + &-enter, &-leave-to { + opacity: 0; + } }