模态框(Modal)

Quasar Modal组件是一个UI覆盖层，它提供了扩展的屏幕空间以允许用户完成更多的工作。 Modals用于诸如登录或注册对话框、消息撰写窗口或展开的选项选择(如提供要成为朋友的用户列表)之类的事情。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QModal'],

  // 可选的，如果你想使用
  // 指令`v-close-overlay`
  directives: ['CloseOverlay']
}

基本用法

下面你会发现一个非常基本模式的代码：

<template>
  <q-modal v-model="opened">
    <h4>Basic Modal</h4>
    <q-btn
      color="primary"
      @click="opened = false"
      label="Close"
    />
  </q-modal>
</template>

<script>
export default {
  data () {
    return {
      opened: false
    }
  }
}
</script>

模态框响应窗口的宽度（请参阅桌面上的演示并调整浏览器窗口大小）。 有时候，无论窗口宽度如何，您都需要始终使模态框最大化或最小化，所以为了做到这一点，Quasar提供了 minimized 和 maximized 属性：

<q-modal maximized>
  ...
</q-modal>

Vue属性

属性 类型 说明
minimized 布尔 无论屏幕宽度如何，始终最小化。
maximized 布尔 无论屏幕宽度如何，始终最大化。
no-route-dismiss 布尔 默认情况下，当路由改变时，模态框被关闭。这个属性阻止这个行为。
no-esc-dismiss 布尔 按Esc键不会关闭模态框。
no-backdrop-dismiss 布尔 通过点击/轻击背景不会关闭模态框。
content-css 对象/数组/字符串 将CSS样式应用于模态容器。当同时指定position属性时，使用对象或对象数组。
content-classes 对象/数组/字符串 适用于Modal内容的类。
position 字符串 将Modal粘贴到其中一个屏幕边缘（top, right, bottom, left）。
position-classes 字符串 空格分隔的CSS类覆盖默认的items-center justify-center类。如果存在position属性，则由position覆盖。
transition 字符串 Vue过渡使用。quasar带有q-modal转换。但是你可以使用CSS编写自己的Vue过渡并使用它们。
enter-class 字符串 进入过渡类名
leave-class 字符串 离开过渡类名

Vue方法

方法 说明
show 打开模态框。在模态框打开后触发一个可选的Function参数。
hide 关闭模式框。在模态框关闭后触发一个可选的Function参数。
toggle 打开/关闭模态框切换。在模态框切换后触发一个可选的Function参数。

Vue事件

事件名称 说明
@show 在模态框打开后立即触发。
@hide 在模态框关闭后立即触发。
@escape-key 如果通过桌面上的退出键取消了模态框，则触发。

例子

样式表模态框

<q-modal content-css="padding: 50px">
  ...
</q-modal>

将模态框粘贴到边缘

<q-modal position="left">
  ...
</q-modal>

带布局的模态框

在模态框中进行布局时，Quasar有一个名为QModalLayout的特殊组件（在下一节中介绍），它负责处理任何需要的结构。

不要在QModal中使用QLayout。 相反，请使用简化的QModalLayout。

<q-modal v-model="opened" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
  <q-modal-layout>
    <q-toolbar slot="header">
      <q-btn
        flat
        round
        dense
        v-close-overlay
        icon="keyboard_arrow_left"
      />
      <q-toolbar-title>
        Header
      </q-toolbar-title>
    </q-toolbar>

    <q-toolbar slot="header">
      <q-search inverted v-model="search" color="none" />
    </q-toolbar>

    <q-toolbar slot="footer">
      <q-toolbar-title>
        Footer
      </q-toolbar-title>
    </q-toolbar>

    <div class="layout-padding">
      <h1>Modal</h1>

      <q-btn
        color="primary"
        v-close-overlay
        label="Close"
      />

      <p>This is a Modal presenting a Layout.</p>
    </div>
  </q-modal-layout>
</q-modal>

QModalLayout

QModalLayout有两个插槽（header和footer）以及可以是字符串/对象/数组的以下属性：

属性 类型 说明
header-style 字符串/对象/数组 应用于页眉的样式。
header-class 字符串/对象/数组 应用于页眉的CSS类。
content-style 字符串/对象/数组 应用于内容（页眉和页脚之间）的样式。
content-class 字符串/对象/数组 应用于内容（在页眉和页脚之间）的CSS类。
footer-style 字符串/对象/数组 应用于页脚的风格。
footer-class 字符串/对象/数组 应用于页脚的CSS类。

例子：

<q-modal .....>
  <q-modal-layout
    header-style="min-height: 100px"
    content-class="{'bg-primary': isPrimary, 'some-class': someBoolean}"
    footer-class="bg-primary some-class"
    footer-style="{fontSize: '24px', fontWeight: 'bold'}"
  >
    <!--
       在这里注入页眉或页脚插槽
       例子：
           1. <div slot =“header”> ... </ div>
           2. <q-toolbar slot =“header”> ... </ q-toolbar>
     -->
    ...

    <!--
       所有其他元素不使用页眉或页脚插槽
       被认为是内容
    -->
    ....
  </q-modal-layout>
</q-modal>
对话框 通知框