JModal

JModal：原生a-modal封装，支持a-modal所有特性

参数配置

参数	类型	必填	说明
fullscreen	boolean	非必填	是否默认全屏
canFullscreen	boolean	非必填	是否显示全屏按钮
afterClose	function	非必填	Modal 完全关闭后的回调
bodyStyle	object	非必填	Modal body 样式
cancelButtonProps	ButtonProps	非必填	cancel 按钮 props
centered	boolean	非必填	垂直居中展示 Modal
closable	boolean	非必填	是否显示右上角的关闭按钮
closeIcon	slot	非必填	自定义关闭图标
confirmLoading	boolean	非必填	确定按钮 loading
destroyOnClose	boolean	非必填	关闭时销毁 Modal 里的子元素
footer	string	slot	非必填
forceRender	boolean	非必填	强制渲染 Modal
getContainer	(instance): HTMLElement	非必填	指定 Modal 挂载的 HTML 节点
keyboard	boolean	非必填	是否支持键盘 esc 关闭
mask	boolean	非必填	是否展示遮罩
maskClosable	boolean	非必填	点击蒙层是否允许关闭
maskStyle	object	非必填	遮罩样式
okButtonProps	ButtonProps	非必填	ok 按钮 props
okText	string	slot	非必填
cancelText	string	slot	非必填
okType	string	非必填	确认按钮类型
title	string	非必填	标题
open	boolean	非必填	对话框是否可见
width	string	number	非必填
wrapClassName	string	非必填	对话框外层容器的类名

更多属性事件详见 Modal

效果展示

使用示例

<template>
  <JModal :title="title" :width="width" v-model:open="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
  </JModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
  
  const title = ref<string>('');
  const width = ref<number>(800);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);

  /**
   * 确定按钮点击事件
   */
  function handleOk() {}

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
  }
</script>