Gitee
Appearance
Modal 弹出窗口
Modal 组件用来已弹出模态窗口的形式展示页面内容。
基本用法
动态弹出
自定义按钮-普通调用
自定义按钮-函数式调用
窗口尺寸
最大化
iframe
自定义模板
是否模态
类型
typescript
export interface ModalButton {
class: string;
focusedByDefault?: boolean;
disable?: boolean;
iconClass?: string;
handle: ($event: MouseEvent) => void;
text: string;
}
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| allowClickMaskToClose | boolean | true | 允许点击蒙层关闭对话框 |
| beforeClose | function | () => true | 关闭前事件 |
| class | string | '' | 自定义样式，类名以空格隔开 |
| maskClass | string | '' | 自定义蒙层样式，类名以空格隔开 |
| mask | boolean | false | 是否模态 |
| title | string | -- | 窗口标题 |
| width | number | 500 | 窗口宽度 |
| height | number | 320 | 窗口高度 |
| footerHeight | number | 60 | 底部区域高度，如果设置为0，则不显示底部区域 |
| buttons | ModalButton | -- | 底部按钮 |
| modelValue | boolean | false | 双向绑定属性是否显示窗口 |
| showHeader | boolean | true | 展示头部 |
| showButtons | boolean | true | 展示默认按钮 |
| fitContent | boolean | true | 自适应尺寸 |
| showHeader | boolean | true | 展示头部 |
| showHeader | boolean | true | 展示头部 |
| showCloseButton | boolean | true | 展示右上角关闭弹窗按钮 |
| showMaxButton | boolean | true | 展示右上角最大化按钮 |
| resizeable | boolean | true | |
| draggable | boolean | true | 可拖拽窗口 |
| dragHandle | string | - | 拖拽抓手，赋值css选择器 |
| acceptCallback | function | - | 命令式调用属性，底部默认确定按钮回调事件 |
| rejectCallback | function | - | 命令式调用属性，底部默认取消按钮回调事件 |
| closedCallback | function | - | 命令式调用属性，默认关闭按钮回调事件 |
| render | function | - | 命令式调用属性，默认插槽，返回VNode |
ModalButton
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | string | -- | 按钮名称 |
| class | string | '' | 自定义样式 |
| disable | boolean | false | 禁用 |
| iconClass | string | -- | 图标class |
| handle | Function($event: MouseEvent, contetx: any) | - | 按钮事件 |
命令式调用
按照以下方式调用
import { inject } from 'vue';
import { F_MODAL_SERVICE_TOKEN } from '@farris/ui-vue';
const modalService = inject(F_MODAL_SERVICE_TOKEN) as any;
const modalInstance = modalService.open({
...
});
<!-- 销毁 -->
modalInstance.destroy();
插槽
TIP
暂无内容