web-dev-qa-db-fra.com

Définir la largeur de l'écran réactif avec vuejs

Est-il possible d'avoir une largeur de fenêtre réactive où une variable ou une propriété de données suit le redimensionnement d'une fenêtre

par exemple

computed:{
    smallScreen(){
        if(window.innerWidth < 720){
            this.$set(this.screen_size, "width", window.innerWidth)
            return true
        }
    return false
}
vue.jswindowwidthscreenreactive-programming
6
Jon Awoyele

Je ne pense pas qu'il existe un moyen de le faire, sauf si vous attachez un auditeur sur la fenêtre. Vous pouvez ajouter une propriété windowWidth sur le data du composant et attacher l'écouteur de redimensionnement qui modifie la valeur lorsque le composant est monté.

Essayez quelque chose comme ceci:

<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>

J'espère que cela pourra aider!

4
mtflud

Si vous utilisez plusieurs composants avec cette solution, la fonction de gestionnaire de redimensionnement de la réponse acceptée ne mettra à jour que le dernier composant.

Ensuite, vous devriez utiliser ceci à la place:

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);
   }
}

source: https://github.com/vuejs/vue/issues/1915#issuecomment-159334432

1
Dósa Bálint

Vous pouvez également attacher une classe en fonction de la largeur de la fenêtre

<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>
0
Agani Nyakundi