Question

我想要做的是在屏幕很小的情况下使Dialog全屏显示。我当前的代码是这样的。

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

...

screen_width: screen.width

但是，除非用户刷新屏幕，否则当屏幕变小时，这种方法不会更新布局。

<v-dialog class="dialog">

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

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

Answer 1

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

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

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

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：如何在不刷新的情况下更新布局

1 个答案: