Vue.js:如何在不刷新的情况下更新布局 [英] Vue.js: how to update the layout without refreshing

问题描述

我想要做的是在屏幕尺寸较小时使Dialog全屏.我现在的代码是这样的.

...屏幕宽度:屏幕宽度

然而，这种方式不会在屏幕变小时时更新布局，除非用户刷新屏幕.

@media only screen and (max-width: 450px).dialog {宽度:100%；高度:100%；}

我也试过这种方法，但是没有用.如何在不让用户刷新屏幕的情况下更改布局?

解决方案

而不是 screen.width 我更倾向于跟踪视口宽度，window.innerWidth.

下面的示例跟踪宽度和高度，并通过 Vue 原型上的反应式对象公开它们.该对象可作为实例上的 $viewport 属性访问.window 上的 resize 事件用于监听视口大小的变化并相应地更新反应值.

如果您想在整个应用程序的多个位置使用视口大小，将其添加到原型中会很有用.如果您只想在一个特定的地方使用它，那么您可以将大部分逻辑移到您的组件中.在这种情况下，您不需要使用 Vue.observable，而只需为宽度设置一个合适的 data 属性即可.您还需要在组件销毁时移除 resize 侦听器.

const updateSizes = (obj = {}) =>{obj.width = window.innerWidthobj.height = window.innerHeight返回对象}Object.defineProperty(Vue.prototype, '$viewport', {值:Vue.observable(updateSizes())})window.addEventListener('resize', () => {updateSizes(Vue.prototype.$viewport)})新的 Vue({el: '#app',vuetify: 新的 Vuetify(),数据 () {返回 {对话:真}}})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"><link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://unpkg.com/vuetify@2.0.11/dist/vuetify.min.css" rel="stylesheet"><script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script><script src="https://unpkg.com/vuetify@2.0.11/dist/vuetify.min.js"></script><div id="应用程序"><v-app><v-对话框v-model="对话框"宽度=500":fullscreen="$viewport.width <450"><v-card><v-card-titleclass="headline gray lighten-2"主标题>标题</v-card-title><v-card-text>文章主体</v-card-text></v-card></v-对话框></v-app>

What I want to do is to make Dialog fullscreen when the screen size is small. My current code is like this.

<v-dialog 
    max-width="600px"
    :fullscreen="screen_width < 450 ? true : false">

...

screen_width: screen.width

However, this way doesn't update the layout when the screen is getting small unless the user refresh the screen.

<v-dialog class="dialog">

@media only screen and (max-width: 450px)
.dialog {
    width: 100%;
    height: 100%;
}

I tried this way as well but this didn't work. How can I change the layout without having the user refresh the screen?

解决方案

Rather than screen.width I'd be more inclined to track the viewport width, window.innerWidth.

The example below tracks both the width and height and exposes them via a reactive object on the Vue prototype. That object is accessible as the $viewport property on the instance. The resize event on window is used to listen for changes to the viewport size and update the reactive values accordingly.

Adding it to the prototype is useful if you want to use the viewport size in several places throughout your application. If you just want to use it in one specific place then you could move most of the logic into your component instead. You wouldn't need to use Vue.observable in that case, instead you'd just have a suitable data property for the width. You'd also want to remove the resize listener when the component is destroyed.

const updateSizes = (obj = {}) => {
  obj.width = window.innerWidth
  obj.height = window.innerHeight
  return obj
}

Object.defineProperty(Vue.prototype, '$viewport', {
  value: Vue.observable(updateSizes())
})

window.addEventListener('resize', () => {
  updateSizes(Vue.prototype.$viewport)
})

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      dialog: true
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.11/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.11/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-dialog
      v-model="dialog"
      width="500"
      :fullscreen="$viewport.width < 450"
    >
      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          Title
        </v-card-title>

        <v-card-text>
          Body text
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</div>

这篇关于Vue.js:如何在不刷新的情况下更新布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！