Maison > Article > interface Web > Comment résoudre le problème des événements de changement dans la fenêtre d'écoute VUE
Ci-dessous, je partagerai avec vous une brève discussion sur la question des événements de changement de fenêtre de surveillance VUE. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.
Vuejs lui-même est un framework MVVM. Cependant, lors du suivi des événements sur la fenêtre, cela semble souvent insuffisant.
Par exemple, cette fois c'était window.resize, je l'ai aussi vérifié sur Baidu avant de le faire. Je vois que tout le monde s'inquiète de ce problème.
Question : J'ai également rencontré un tel problème aujourd'hui, à propos de l'adaptation du canevas. Modifiez la largeur du canevas en fonction du changement de la fenêtre. Remarque : Les problèmes importants doivent être mentionnés trois fois pour résoudre les bugs du framework. Parlons d'abord de la version du framework (Vue 2.x, ES6 utilisé ici)
.Solution :
Étape 1 : Définissez d'abord un attribut de largeur d'enregistrement dans les données
data: { screenWidth: document.body.clientWidth // 这里是给到了一个默认值 (这个很重要) }
Chapitre Deuxième étape : Nous devons parler de la méthode de montage de l'événement reisze lorsque vue est montée
mounted () { const that = this window.onresize = function() { return function(){ window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth })() } }
Troisième étape : surveillez les changements dans cette valeur d'attribut , si des changements surviennent, transmettez cette valeur à this.screenWidth
watch: { screenWidth (val) { this.screenWidth = val } }
Étape 4 : Optimisation : le déclenchement fréquent de la fonction de redimensionnement provoque le blocage de la page
watch: { screenWidth (val) { if (!this.timer) { this.screenWidth = val this.timer = true let that = this setTimeout(function () { // that.screenWidth = that.$store.state.canvasWidth console.log(that.screenWidth) that.init() that.timer = false }, 400) } } }
Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles connexes :
Vue implémente le changement d'onglet et la méthode de changement de style
"==" et "===" en JavaScript Explication détaillée de la différence
Notes de développement du projet de blog node.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!