关闭弹层 Close Popup Directive

Vue 组件
Dialog 对话框
Vue 组件
Menu 菜单

这是一个与QDialog（对话框/弹窗） 和 QMenu（菜单）组件搭配使用的指令。当一个 DOM/组件绑定了 v-close-popup 指令后，触发其点击/触摸事件时会关闭其父组件上弹出的 QDialog 或 QMenu。

ClosePopup API

ClosePopup API
类型
Boolean | Number | String
说明
如果值为 0 或 'false'，则禁用指令；如果值小于 0，则关闭链中的所有弹出窗口；如果值为 1 或 'true' 或未定义，则仅关闭父弹出窗口；如果值大于 1，则关闭链中指定数量的父弹出窗口（请注意，链式 QMenus 仅被视为 1 个弹出窗口并且 QPopupProxy 分隔了链接的菜单）

用法

基础

<template>
  <div class="q-pa-md">
    <q-btn label="Open Menu" color="primary">
      <q-menu>
        <q-list>
          <q-item tag="label">
            <q-item-section avatar>
              <q-checkbox v-model="firstItemEnabled" />
            </q-item-section>
            <q-item-section>
              <q-item-label>First Item Enabled</q-item-label>
            </q-item-section>
          </q-item>
          <q-item
            v-for="n in 5"
            :key="n"
            v-close-popup="n > 1 || firstItemEnabled"
            :clickable="n > 1 || firstItemEnabled"
            @click="onClick(n)"
          >
            <q-item-section>Menu Item {{n}}</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-btn label="Open Dialog" color="primary" @click="dialog = true" />

    <q-dialog v-model="dialog" persistent>
      <q-card>
        <q-card-section class="row items-center">
          <q-avatar icon="signal_wifi_off" color="primary" text-color="white" />
          <span class="q-ml-sm">You are currently not connected to any network.</span>
        </q-card-section>

        <q-card-section class="row items-center">
          <q-toggle v-model="cancelEnabled" label="Cancel button enabled" />
        </q-card-section>

        <!-- Notice v-close-popup -->
        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup="cancelEnabled" :disable="!cancelEnabled" />
          <q-btn flat label="Turn on Wifi" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

设置关闭多层级

您也可以通过为指令绑定一个数字的方式设置所关闭的弹窗的层级：

<... v-close-popup="3">
  • 若绑定的值是 0 或 false 则表示禁用此指令
  • 若绑定的值小于 0 则它会关闭此 DOM 链上的所有弹层
  • 若绑定的值是 1 或 true 或 undefined 则它只会关闭父主组件上的弹层
  • 若绑定的值是 大于 1，则表示它会精确的关闭此 DOM 链上对应层级的弹层 (注意链式的 QMenus 的层级始终被视为 1)

注意下方的链式 QMenus 示例，它不需要精确的指定层级，当v-close-popup作用到多层级链式的 QMenus 会将其全部关闭。

<template>
  <div class="q-pa-md">
    <q-btn label="Menu" color="primary">
      <q-menu>
        <q-list dense style="min-width: 100px">
          <q-item clickable v-close-popup>
            <q-item-section>Open...</q-item-section>
          </q-item>
          <q-item clickable v-close-popup>
            <q-item-section>New</q-item-section>
          </q-item>
          <q-separator />
          <q-item clickable>
            <q-item-section>Preferences</q-item-section>
            <q-item-section side>
              <q-icon name="keyboard_arrow_right" />
            </q-item-section>

            <q-menu anchor="top end" self="top start">
              <q-list>
                <q-item
                  v-for="n in 3"
                  :key="n"
                  dense
                  clickable
                >
                  <q-item-section>Submenu Label</q-item-section>
                  <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>
                  <q-menu auto-close anchor="top end" self="top start">
                    <q-list>
                      <q-item
                        v-for="n in 3"
                        :key="n"
                        dense
                        clickable
                      >
                        <q-item-section>3rd level Label</q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-item>
              </q-list>
            </q-menu>

          </q-item>
          <q-separator />
          <q-item clickable v-close-popup>
            <q-item-section>Quit</q-item-section>
          </q-item>
        </q-list>

      </q-menu>
    </q-btn>
  </div>
</template>

在下面的示例中，菜单上绑定的 v-close-popup=“2”，其值为 2，所以点击关闭菜单时也会关闭 dialog

<template>
  <div class="q-pa-md">
    <q-btn label="Dialog" color="primary" @click="dialog = true" />

    <q-dialog v-model="dialog">
      <q-card>
        <q-card-section class="row items-center q-gutter-sm">
          <q-btn no-caps label="Open menu" color="primary">
            <q-menu>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup="2">
                  <q-item-section>Open...</q-item-section>
                </q-item>
                <q-item clickable v-close-popup="2">
                  <q-item-section>New</q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable>
                  <q-item-section>Preferences</q-item-section>
                  <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>

                  <q-menu anchor="top end" self="top start">
                    <q-list>
                      <q-item
                        v-for="n in 3"
                        :key="n"
                        dense
                        clickable
                      >
                        <q-item-section>Submenu Label</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>
                        <q-menu anchor="top end" self="top start">
                          <q-list>
                            <q-item
                              v-for="n in 3"
                              :key="n"
                              dense
                              clickable
                              v-close-popup="2"
                            >
                              <q-item-section>3rd level Label</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                    </q-list>
                  </q-menu>

                </q-item>
                <q-separator />
                <q-item clickable v-close-popup="2">
                  <q-item-section>Quit</q-item-section>
                </q-item>
              </q-list>

            </q-menu>
          </q-btn>

          <q-btn no-caps label="Close dialog" color="primary" v-close-popup />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

注意一下示例中，可以打开一个多层级的 dialog，当 v-close-popup 指令的值设置为 2 的时候可以同时关闭两个 dialog

<template>
  <div class="q-pa-md">
    <q-btn label="Open Dialog" color="primary" @click="dialog = true" />

    <q-dialog v-model="dialog">
      <q-card>
        <q-card-section>
          <div class="text-h6">First dialog</div>
        </q-card-section>
        <q-card-section class="row items-center q-gutter-sm">
          <q-btn label="Open dialog" color="primary" @click="dialog2 = true" />
          <q-btn v-close-popup label="Close" color="primary" />

          <q-dialog v-model="dialog2">
            <q-card>
              <q-card-section>
                <div class="text-h6">Second dialog</div>
              </q-card-section>
              <q-card-section class="row items-center q-gutter-sm">
                <q-btn v-close-popup="2" label="Close both dialogs" color="accent" />
                <q-btn v-close-popup label="Close this dialog" color="accent" />
              </q-card-section>
            </q-card>
          </q-dialog>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

视频讲解

若仍有疑惑，请观看视频讲解

查看更多？
Vue 组件
Virtual Scroll 虚拟滚动
Vue 指令
Intersection 交叉
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。