如何使Quasar QDialog在移动在线上全屏显示？

Question

我有一个响应式的Web应用，其中包含几个dialogs，只要用户通过移动设备访问它，我都希望它们占据整个屏幕（又称全屏）。

我找到了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
     }
    }

Answer 2

尝试使用qDialog组件的“最大化”道具。