Modal

为页面和功能提供导航的菜单列表。

说明

组件API详细内容请参考:https://www.antdv.com/components/modal-cn

新增属性

  • 属性说明:
参数名 类型 必填 默认值 说明
animat boolean true 弹窗展示的动画
showTitleOverflow boolean true 标题省略号
draggable boolean true 是否指出拖拽
marginSize number, string 100 外边距离
minHeight number, string 200 最小高
minWidth number, string 460 最小宽
height number, string
width number, string
closeAction string hide 关闭时销毁还是隐藏,’destroy’, ‘hide’
showHeader boolean true 显示头部
maximizable boolean true 显示放大
maximized boolean false 是否全屏
escClosable boolean true esc关闭
maskClosable boolean true 点击遮罩关闭
duration number, string 3000 持续时间
tool Array 窗口右上角按钮
top number, string 15 距离顶部的位置
className string 样式
okButton boolean, string, Function, Object false 确认按钮
cancelButton boolean, string, Function, Object false 取消按钮
buttonFocus boolean 底部操作按钮获取焦点
buttonAlign string 底部操作位置,取值’right’, ‘center’, ‘left’

新增方法

  • 参数说明:
参数名 类型 必填 默认值 说明
onClose Function 关闭事件
onBeforeclose Function 关闭前事件
onShow Function 展示弹窗事件
onBeforeshow Function 展示弹窗前事件

使用方法

  • 代码示例:
    // 在script标签中按需引入
    import { Menu } from '@jecloud/ui';
    export default {
      components: { Menu, MenuItem: Menu.Item },
      setup() {
          const visible = ref(true);
          return { visible };
      },
    };
    // 在vue的template标签中
    <Modal
      v-model:visible="visible"
      title="Basic Modal"
      :button-align="'center'"
      :width="300"
      :height="300"
    >
      弹出窗口
    </Modal>
  • 事件脚本示例:
    const { Modal } = JE.useUi();
    const { h, ref }= JE.useVue();
    return h(Modal, {visible:true});
最后编辑: 秦永莲  文档更新时间: 2024-08-08 13:51   作者:秦永莲