J'ai une page ci-dessous est le code: mais est-ce que je mets la déclaration à l'intérieur Aidez ici! window.innerwidth pour la détection, mais il semble qu'il ne fonctionne pas lors de la mise dans le monté () Crochet de cycle de vie. créé () LIFECYCLET, il renvoie à nouveau une erreur sous la fenêtre n'est pas définie . créé () est exécuté avant alors que monté () et aussi, mon ESLint affiche une erreur comme "No-Globals-in-créée" . . .
4 Réponses :
est-il nécessaire de définir la valeur iSmobile dans le crochet monté? Si non, je suggérerais que vous créez une propriété calculée ismobile qui renvoie true / filet en fonction du innerwidth
Vous pouvez également envelopper votre contenu dans un DIV et utiliser la balise REF pour accéder à la clientèle initiale de la page, quelque chose comme ceci:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{this.size}}px
<div ref="pageSizeContainer" style="background: #f5f5f5;padding:15px">
Device size is a {{this.deviceType}}
</div>
</div> Je pense que vous ouvrez ceci sur un bureau si vous pouvez ouvrir la console de Chrome, de sorte que ceci est le cas, le problème ici est que vous n'avez pas configuré d'auditeur d'événement de redimension avec le code initial dans le crochet monté. < p> Quelque chose comme ça devrait fonctionner dans votre cas:
Pour lire la fenêtre J'ai créé une boîte à sable rapide où vous pouvez le vérifier. La page Loads, lit Cependant, cela ne fonctionne que lors de la charge de la page. Il ne réévalue pas lorsque la fenêtre est redimensionnée. Gardez cela à l'esprit. .innerWidth dans le crochet monté fonctionne comme prévu. Et votre code devrait également fonctionner. Essayez de vous connecter à la fenêtre window.innerwidth aussi pour voir ce qui se passe.
fenêtre.innerwidth et définit ismobile en conséquence.
https://codesandbox.io/s/deank-tree-bgwo3
window.innerWidth journaux sous forme de valeur 1315. Je ne sais pas comment? Quoi qu'il en soit, la réponse de procoib a résolu le problème
C'est dans la DOCS, VUE LIFECYCYCYCYCYCLE -> TIRE MONTÉ + RENDUE DOM, utilisez
Await VM. $ NextTick ()J'ai essayé de reproduire, jetez un coup d'œil à mon exemple, il semble que cela fonctionne comme prévu