変数またはデータプロパティがウィンドウのサイズ変更を追跡するリアクティブウィンドウ幅を設定することは可能ですか
例えば
computed:{
smallScreen(){
if(window.innerWidth < 720){
this.$set(this.screen_size, "width", window.innerWidth)
return true
}
return false
}
ウィンドウにリスナーを接続しない限り、その方法はないと思います。コンポーネントのwindowWidth
にプロパティdata
を追加し、コンポーネントのマウント時に値を変更するサイズ変更リスナーをアタッチできます。
このようなものを試してください:
<template>
<p>Resize me! Current width is: {{ windowWidth }}</p>
</template
<script>
export default {
data() {
return {
windowWidth: window.innerWidth
}
},
mounted() {
window.onresize = () => {
this.windowWidth = window.innerWidth
}
}
}
</script>
お役に立てば幸いです。
このソリューションで複数のコンポーネントを使用している場合、承認された回答のサイズ変更ハンドラー関数は最後のコンポーネントのみを更新します。
次に、代わりにこれを使用する必要があります:
import { Component, Vue } from 'vue-property-decorator';
@Component
export class WidthWatcher extends Vue {
public windowWidth: number = window.innerWidth;
public mounted() {
window.addEventListener('resize', this.handleResize);
}
public handleResize() {
this.windowWidth = window.innerWidth;
}
public beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
}
ソース: https://github.com/vuejs/vue/issues/1915#issuecomment-159334432
ウィンドウの幅に応じてクラスをアタッチすることもできます
<template>
<p :class="[`${windowWidth > 769 && windowWidth <= 1024 ? 'special__class':'normal__class'}`]">Resize me! Current width is: {{ windowWidth }}</p>
</template>
<script>
export default {
data() {
return {
windowWidth: window.innerWidth
}
},
mounted() {
window.onresize = () => {
this.windowWidth = window.innerWidth
}
}
}
</script>
<style scoped>
.normal__class{
}
.special__class{
}
</style>