RModal 与弹窗

RModal 继承 Naive UI Modal 的 show、preset、关闭事件和插槽，增加预设宽度和全屏卡片。声明式弹窗通过 show / onUpdateShow 或 v-model:show 控制。

import { RModal } from "@/components";
import { NButton } from "naive-ui";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const show = ref(false);
    return () => (
      <>
        <NButton
          onClick={() => {
            show.value = true;
          }}
        >
          查看报表
        </NButton>
        <RModal
          show={show.value}
          onUpdateShow={(value) => {
            show.value = value;
          }}
          preset="card"
          title="库存报表"
          cardWidth={960}
        >
          报表内容
        </RModal>
      </>
    );
  },
});

属性	默认	作用范围
width	600	未指定预设时的宽度。
cardWidth	600	preset="card" 的宽度。
dialogWidth	446	preset="dialog" 的宽度。
fullscreen	false	仅 card 预设生效。

宽度接受数字或 CSS 尺寸。fullscreen 让卡片占满窗口，正文在溢出时滚动；它不调用浏览器全屏。default、header、footer 等插槽依 Naive UI 预设处理，组件原样转发。

命令式弹窗

@/components 的 useModal() 已弃用，兼容代码仍可通过 create(options) 和 destroyAll() 调用。create 返回 Naive UI 弹窗句柄，支持 fullscreen、width、cardWidth、dialogWidth 等兼容配置。新代码从 naive-ui 导入 useModal，在 NModalProvider 的后代调用；需要模板专用全屏样式时用声明式 RModal。提示用户确认危险操作时也可以用全局 Dialog Provider。

组件源码 · 兼容 Hook · 回归用例