如何让Quasar QDialog在手机在线全屏显示？

Question

我有一个带有几个对话框的响应式网络应用程序，每当用户通过移动设备访问它时，我想让它们占据整个屏幕（也称为全屏）。

我找到了full-width和full-height道具，但我想不出将它们应用于移动设备的干净方法。有想法吗？

Answer 1

您可以在手机上有条件地设置maximized来实现它。

例子 -

<q-btn label="Maximized" color="primary" @click="dialog = true" ></q-btn>

<q-dialog
  v-model="dialog"
  persistent
  :maximized="$q.platform.is.mobile?maximizedToggle:false"
  transition-show="slide-up"
  transition-hide="slide-down"
>
  <q-card class="bg-primary text-white">
    <q-bar>
      <q-space ></q-space>

      <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
        <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
      </q-btn>
      <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
        <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
      </q-btn>
      <q-btn dense flat icon="close" v-close-popup>
        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
      </q-btn>
    </q-bar>

    <q-card-section>
      <div class="text-h6">Alert</div>
    </q-card-section>

    <q-card-section class="q-pt-none">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
    </q-card-section>
  </q-card>
</q-dialog>


    data: function () {
        return {
       maximizedToggle: true
     }
    }