FullModal 全屏弹窗

全屏弹窗组件，支持全屏拖拽。

基础用法

复制代码

查看代码

<template>
   <div>
      <a-button type="primary" @click="showModal = true">打开弹框</a-button>
      <s-full-modal allowFullScreen v-model:open="showModal" title="标题" @ok="handleOk" @cancel="handleCancel">
        内容区域
      </s-full-modal>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);

const handleOk = () => {
  console.log("点击确定");
  showModal.value = false;
};

const handleCancel = () => {
  console.log("点击取消");
  showModal.value = false;
};
</script>

自定义渲染(slot使用)

复制代码

查看代码

<template>
    <div>
      <div class="trigger-btns">
        <a-button type="primary" @click="showModal1 = true">打开弹框(完全自定义头)</a-button>
        <a-button type="primary" @click="showModal2 = true">打开弹框(自定义头部左/右侧)</a-button>
        <a-button type="primary" @click="showModal3 = true">打开弹框(自定义底部左/右侧)</a-button>
        <a-button type="primary" @click="showModal4 = true">打开弹框(完全自定义底)</a-button>
      </div>
      <s-full-modal v-model:open="showModal1" allowFullScreen @cancel="handleCancel1">
        <template #title>
          <span class="bg-[red] text-[#fff]">我是自定义标题</span>
        </template>
        内容区域
      </s-full-modal>
      <s-full-modal v-model:open="showModal2" allowFullScreen @cancel="handleCancel2">
        <template #title-left>
          <span class="bg-[red] text-[#fff]">我是自定义标题</span>
        </template>
        <template #title-right>
          <span class="bg-[red] text-[#fff]">我是右侧自定义区域</span>
        </template>
        内容区域
      </s-full-modal>
      <s-full-modal v-model:open="showModal3" allowFullScreen title="标题" @cancel="handleCancel3">
        <!-- 自定义底部左右侧 -->
        <template #footer-left>
          <span class="text-[12px]">左侧内容</span>
        </template>
        <template #footer-right>
          <a-space>
            <a-button type="text" @click="handleCancel3">取消</a-button>
            <a-button type="primary" @click="handleOk3">确定</a-button>
          </a-space>
        </template>
      </s-full-modal>
      <s-full-modal v-model:open="showModal4" title="自定义底部示例" allowFullScreen @cancel="handleCancel4">
        <div>这里是弹框内容</div>
        <!-- 自定义底部内容 -->
        <template #footer>
          我是自定义底部内容。
        </template>
      </s-full-modal>
    </div>
</template>
<script setup>
  const handleCancel1 = () => {
    showModal1.value = false;
  };
  const showModal2 = ref(false);


  const handleCancel2 = () => {
    showModal2.value = false;
  };

  const showModal3 = ref(false);


  const handleCancel3 = () => {
    showModal3.value = false;
  };

  const showModal4 = ref(false);

  const handleCancel4 = () => {
    showModal4.value = false;
  };
</script>

拖拽支持

沿用了官网的示例，这里仅需要配置 draggable 即可。

复制代码

查看代码

<template>
   <div>
      <a-button type="primary" @click="showModal = true">打开弹框</a-button>
      <s-full-modal allowFullScreen draggable v-model:open="showModal" title="标题" @ok="handleOk" @cancel="handleCancel">
        内容区域
      </s-full-modal>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);

const handleOk = () => {
  console.log("点击确定");
  showModal.value = false;
};

const handleCancel = () => {
  console.log("点击取消");
  showModal.value = false;
};
</script>

API

Props

参数	说明	类型	默认值
visible/open(v-model)	是否显示弹窗(visible部分历史兼容)	boolean	false
title	弹窗标题	string	-
width	弹窗宽度	string | number	450
height	弹窗高度	string | number	'auto'
max-height	最大高度	string	70vh
min-height	最小高度	string	100px
draggable	是否可拖动	boolean	false
needConfirmClose	是否需要二次确认(默认情况下，会触发cancel后自动关闭，如果有需求，设置后可以自定义取消逻辑)	boolean	false

antv的modal剩余 props 均能使用。

Events

事件名称	说明	回调参数
ok	点击确定回调	function(e)
cancel	点击取消或X的回调	function(e)

Slots

名称	说明
default	弹窗内容
title	自定义标题
title-left	左侧标题
title-right	右侧操作(默认会显示关闭按钮)
footer	自定义底部
footer-left	自定义底部左侧
footer-right	自定义底部右侧