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 作者:秦永莲