弹出代理

Vue 组件
Menu 菜单
Vue 组件
Dialog 对话框
Vue 指令
Close Popup 关闭弹层

当您需要在较大的屏幕上显示 QMenu，在较小的屏幕上显示 QDialog 时，您可以使用 QPopupProxy。它充当一个代理，可在两个组件中挑选一个使用。Qpopupproxy 还可以处理上下文菜单。

QPopupProxy API

QPopupProxy API
target
: Boolean | String | Element
说明
配置一个目标元素来触发组件的切换；'true' 表示启用父级 DOM 元素，'false' 表示禁用将事件附加到任何 DOM 元素；通过使用字符串（CSS 选择器）或 DOM 元素，它会将事件附加到指定的 DOM 元素（如果存在）。
no-parent-event
: Boolean
说明
跳过将事件附加到目标 DOM 元素（触发元素显示）的步骤
context-menu
: Boolean
说明
允许组件像上下文菜单一样行为，通过右键点击（或在移动设备上长按）打开。
breakpoint
: Number | String
说明
窗口宽度/高度（取较小值）的断点（以像素为单位），当达到该断点时，将使用菜单而不是对话框。

用法

TIP

使用浏览器开发工具在移动设备或桌面设备之间切换（每次更改后都会刷新浏览器），或者在点击 QPopupProxy 组件的容器之前，调整浏览器窗口的大小，以观察 QPopupProxy 组件在 QMenu 或 QDialog 之间切换。默认断点设置为 450px。

标准

<template>
  <div class="q-pa-md">
    <q-btn push color="primary" label="Handles click">
      <q-popup-proxy>
        <q-banner>
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" color="primary" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-btn>
  </div>
</template>

上下文菜单

<template>
  <div class="q-pa-md">
    <q-btn push color="purple" label="Handles right-click">
      <q-popup-proxy context-menu>
        <q-banner>
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" color="primary" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-btn>
  </div>
</template>

断点

下面的实例中，点击输入框中的图标以查看效果。

<template>
  <div class="q-pa-md">
    <q-input filled v-model="input" mask="date" :rules="['date']">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover :breakpoint="600">
            <q-date v-model="input" />
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

透传属性

请注意，QMenu 和 QDialog 所有的属性都可以通过这个组件传递。所以类似 offset 或 transition-show 等属性也可以在 QPopupProxy 中使用。

<template>
  <div class="q-pa-md q-gutter-md" style="font-size: 36px">
    <q-icon name="settings_remote" class="text-brown cursor-pointer">
      <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
        <q-banner class="bg-brown text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-icon>

    <q-icon name="perm_data_setting" class="text-purple cursor-pointer">
      <q-popup-proxy :offset="[10, 10]">
        <q-banner class="bg-purple text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-icon>
  </div>
</template>

WARNING

QPopupProxy 会特殊处理一些组件 (QDate, QTime, QCarousel 和 QColor)，会强制设置 cover: true 和 maxHeight: '99vh'，如果您不希望如此，那么请使用一个 div 作为 QPopupProxy 的直接子组件，包裹住上述组件。

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