使用 vuejs 设置反应式屏幕宽度

Question

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

例如

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

原文由 Jon Awoyele 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不认为有办法做到这一点，除非你在窗口上附加一个监听器。您可以在组件的 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>

希望有帮助！

原文由 mtflud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

那么你应该改用这个：

 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

原文由 aruqen 发布，翻译遵循 CC BY-SA 4.0 许可协议