Кто знает как с помощью директивы определить ширину экрана?
directives: {
screenWidth: {
inserted(el, binding) {
const f = function(evt) {
if (binding.value(evt, el)) {
window.removeEventListener('resize', f)
}
}
window.addEventListener('resize', f)
},
},
},
methods: {
changPicture(el) {
const w = Math.max(window.innerWidth, window.screen.width)
const insertImg = path => {
return el.setAttribute('srcset', require(@/assets/videos/${path.src}
)
el.setAttribute('src', require(@/assets/videos/${path.src}
)
el.setAttribute('alt', require(@/assets/videos/${path.alt}
)
}
switch (true) {
case w >= 3000:
return insertImg(this.picture['3840'])
case w >= 1440:
return insertImg(this.picture['1600'])
case w >= 1024:
return insertImg(this.picture['1440'])
case w >= 800:
return insertImg(this.picture['1024'])
case w >= 700:
return insertImg(this.picture['800'])
case w >= 400:
return insertImg(this.picture['700'])
default:
return insertImg(this.picture['400'])
}
},
},
<picture v-show="!show">
<source v-show="!show" v-screen-width="changPicture" />
<img v-show="!show" v-screen-width="changPicture" />
</picture>