저는 VueJs를 사용하여 사이트를 개발하는 것이 처음입니다. 화면 해상도에 따라 이미지를 선택하는 가장 좋은 방법이 무엇인지 배우고 싶습니다. 많은 연구를했지만 키워드가 매우 일반적이기 때문에 항상 이미지 너비를 사용하는 방법을 생각해 냈습니다. 나는 아래와 같은 해결책을 시도했지만 vuejs에서 작동하지 않는 것 같습니다.
<template>
<div class="img-wrap">
<div v-if="!isMobile()">
<img src="@/assets/img/yogavidya-logo.png" alt="Yogavidya" class="logo-colored">
</div>
<div v-else>
<img src="@/assets/img/logo-small.png" alt="Yogavidya" class="logo-colored">
</div>
</div>
</template>
<script>
methods:{
isMobile() {
if( screen.width <= 760 ) {
return true;
}
else {
return false;
}
}
}
</script>
Vue에서 어떻게 작동하도록 할 수 있습니까?
감사
이 기사에서 영감을 얻었다 VueJS의 반응성 창 매개 변수 반응성을 만들 수window
'VueWindow'만들기
import Vue from "vue";
const vueWindow = new Vue({
data() {
return {
innerWidth: 0
};
},
created() {
this.innerWidth = window.innerWidth;
window.addEventListener('resize', () => {
this.innerWidth = window.innerWidth;
});
},
computed: {
isMobile() {
return this.innerWidth <= 760;
}
}
});
export default vueWindow;
이 창을 사용하려면 OP의 구성 요소를 변경하십시오.
<template>
<div class="img-wrap">
<!-- isMobile is now a computed property -->
<div v-if="!isMobile">
<img src="@/assets/img/yogavidya-logo.png" alt="Yogavidya" class="logo-colored">
</div>
<div v-else>
<img src="@/assets/img/logo-small.png" alt="Yogavidya" class="logo-colored">
</div>
</div>
</template>
<script>
import VueWindow from "./VueWindow";
...
computed: {
isMobile() {
return VueWindow.isMobile;
}
}
...
</script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다