Question

是否有一个反应式窗口宽度，其中变量或数据属性跟踪窗口调整大小

例如

computed:{
    smallScreen(){
        if(window.innerWidth < 720){
            this.$set(this.screen_size, "width", window.innerWidth)
            return true
        }
    return false
}

Answer 1

除非您在窗口上附加侦听器，否则我认为没有其他方法可以做到这一点。您可以在组件的from movie import Movie from user import User import json from pprint import pprint movieArray = [] nameArray = [] directorArray = [] genreArray = [] ##actorArray = [] movieToBeInputted = Movie("","","","") with open('movies.json') as f: contents = json.load(f) print(contents['results'][600]['title']) movieToBeInputted.name = (contents['results'][600]['title']) movieToBeInputted.director = (contents['results'][600]['director']) movieToBeInputted.genre = (contents['results'][600]['genre']) movieToBeInputted.actors = (contents['results'][600]['cast']) movieArray.append(movieToBeInputted) for i in contents: tempGenre = (contents['results'][i]['genre']) genreArray.append(tempGenre) #this is where the error happens print("xxxxxxx") print(movieToBeInputted.actors) ##d = json.load(json_data) ##json_movie_data = json.dumps(json_data) ##movieToBeInputted.actors = json_movie_data上添加属性{ "results": [ { "title": "After Dark in Central Park", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "Boarding School Girls' Pajama Parade", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "Buffalo Bill's Wild West Parad", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "Caught", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "Clowns Spinning Hats", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "Capture of Boer Battery by British", "year": 1900, "director": "James H. White", "cast": null, "genre": "Short documentary", "notes": null }, { "title": "The Enchanted Drawing", "year": 1900, "director": "J. Stuart Blackton", "cast": null, "genre": null, "notes": null }, { "title": "Family Troubles", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "Feeding Sea Lions", "year": 1900, "director": null, "cast": "Paul Boyton", "genre": null, "notes": null }, { "title": "How to Make a Fat Wife Out of Two Lean Ones", "year": 1900, "director": null, "cast": null, "genre": "Comedy", "notes": null }, { "title": "New Life Rescue", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null }, { "title": "New Morning Bath", "year": 1900, "director": null, "cast": null, "genre": null, "notes": null } ] }并附加调整大小侦听器，该侦听器将在安装组件时修改该值。

尝试这样的事情：

windowWidth

希望有帮助！

Answer 2

您还可以根据窗口宽度附加一个类

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

Answer 3

如果您在此解决方案中使用多个组件，则接受的答案的调整大小处理函数将仅更新最后一个组件。

然后您应该使用它：

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

使用Vue.js设置反应式屏幕宽度

3 个答案: