ERP组件库

在当前页面打开一个浮层，承载相关操作。

基本用法

对话框的基本用法。

代码事例

vue

<template>
  <fk-button @click="handleClick">Open Modal</fk-button>
  <fk-modal v-model:visible="visible" :defaultPosition="[100, 100]" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
}
</script>

异步关闭

可以通过 on-before-ok 更简洁的实现异步关闭功能

代码事例

vue


<template>
  <fk-button @click="handleClick">Open Modal</fk-button>
  <fk-modal v-model:visible="visible" :on-before-ok="handleBeforeOk" unmount-on-close @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you
      press the OK button.
    </div>
  </fk-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleBeforeOk = async () => {
      await new Promise(resolve => setTimeout(resolve, 3000));
      return true;
      // prevent close
      // return false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleBeforeOk,
      handleCancel
    }
  },
}
</script>

函数调用

通过函数的方式使用对话框。

代码事例

vue

<template>
  <fk-button @click="handleClick">Open Modal</fk-button>
</template>

<script>
import { h } from 'vue';
import { Button, Modal } from '@erp/common';

const ModalContent = {
  setup() {
    const onClick = () => {
      Modal.info({
        title: 'Info Title',
        content: 'This is an nest info message'
      });
    };

    return () => h('div', {class: 'info-modal-content'}, [
      h('span', {style: 'margin-bottom: 10px;'}, 'This is an info message'),
      h(Button, {size: 'mini', onClick}, 'Open Nest Modal')
    ])
  },
}

export default {
  setup() {
    const handleClick = () => {
      Modal.info({
        title: 'Info Title',
        content: () => h(ModalContent)
      });
    };

    return {
      handleClick
    }
  },
}
</script>

<style>
.info-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

消息提示

有info, success, warning, error四种类型的消息提示，仅提供一个确认按钮用于关闭消息提示对话框。消息默认会默认开启 simple 和 hideCancel，如果想要取消可以再次设置。

代码事例

vue

<template>
  <fk-space>
    <fk-button @click="handleClickInfo">Info</fk-button>
    <fk-button status="success" @click="handleClickSuccess">Success</fk-button>
    <fk-button status="warning" @click="handleClickWarning">Warning</fk-button>
    <fk-button status="danger" @click="handleClickError">Error</fk-button>
  </fk-space>
</template>

<script>
import { Modal } from '@erp/common';

export default {
  setup() {
    const handleClickInfo = () => {
      Modal.info({
        title: 'Info Notification',
        content: 'This is an info description which directly indicates a neutral informative change or action.'
      });
    };
    const handleClickSuccess = () => {
      Modal.success({
        title: 'Success Notification',
        content: 'This is a success notification'
      });
    };
    const handleClickWarning = () => {
      Modal.warning({
        title: 'Warning Notification',
        content: 'This is a warning description which directly indicates a warning that might need attention.'
      });
    };
    const handleClickError = () => {
      Modal.error({
        title: 'Error Notification',
        content: 'This is an error description which directly indicates a dangerous or potentially negative action.'
      });
    };

    return {
      handleClickInfo,
      handleClickSuccess,
      handleClickWarning,
      handleClickError
    }
  },
}
</script>

对话框的宽度

设置 width="auto" 可以让对话框自适应宽度

代码事例

vue

<template>
  <fk-button @click="handleClick">Open Modal</fk-button>
  <fk-modal v-model:visible="visible" width="auto" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
}
</script>

定制按钮文字

设置 okText 与 cancelText 可以自定义按钮文字。

代码事例

vue

<template>
  <fk-button @click="handleClick">Open Modal</fk-button>
  <fk-modal :visible="visible" ok-text="Confirm" cancel-text="Exit" unmount-on-close @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
}
</script>

弹出层表单

在对话框中使用表单

代码事例

vue


<template>
  <fk-button @click="handleClick">Open Form Modal</fk-button>
  <fk-modal v-model:visible="visible" title="Modal Form" @cancel="handleCancel" @before-ok="handleBeforeOk">
    <fk-form :model="form">
      <fk-form-item field="name" label="Name">
        <fk-input v-model="form.name" />
      </fk-form-item>
      <fk-form-item field="post" label="Post">
        <fk-select v-model="form.post">
          <fk-option value="post1">Post1</fk-option>
          <fk-option value="post2">Post2</fk-option>
          <fk-option value="post3">Post3</fk-option>
          <fk-option value="post4">Post4</fk-option>
        </fk-select>
      </fk-form-item>
    </fk-form>
  </fk-modal>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const visible = ref(false);
    const form = reactive({
      name: '',
      post: ''
    });

    const handleClick = () => {
      visible.value = true;
    };
    const handleBeforeOk = (done) => {
      console.log(form)
      window.setTimeout(() => {
        done()
        // prevent close
        // done(false)
      }, 3000)
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      form,
      handleClick,
      handleBeforeOk,
      handleCancel
    }
  },
}
</script>

可拖动

开启 draggable 属性，允许用户拖动对话框。

代码事例

vue

<template>
  <fk-button @click="handleClick">Open Draggable Modal</fk-button>
  <fk-modal v-model:visible="visible" draggable @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
}
</script>

全屏

开启 fullscreen 属性，可以让对话框占满整个容器。

代码事例

vue

<template>
  <fk-button @click="handleClick">Open Modal</fk-button>
  <fk-modal v-model:visible="visible" fullscreen @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
}
</script>

API

`<modal>` Props

参数名	描述	类型	默认值	版本
visible (v-model)	对话框是否可见	`boolean`	`-`
default-visible	对话框默认是否可见（非受控状态）	`boolean`	`false`
width	对话框的宽度，不设置的情况下会使用样式中的宽度值	`number\|string`	`-`	1.0.0
top	对话框的距离顶部的高度，居中显示开启的情况下不生效	`number\|string`	`-`	1.0.0
mask	是否显示遮罩层	`boolean`	`true`
title	标题	`string`	`-`
title-align	标题的水平对齐方向	`'start' \| 'center'`	`'start'`	1.0.0
align-center	对话框是否居中显示	`boolean`	`true`
unmount-on-close	关闭时是否卸载节点	`boolean`	`true`
mask-closable	是否点击遮罩层可以关闭对话框	`boolean`	`true`
hide-cancel	是否隐藏取消按钮	`boolean`	`false`
simple	是否开启简单模式	`boolean`	`(props: any) => { return props.notice;}`
closable	是否显示关闭按钮	`boolean`	`true`
ok-text	确认按钮的内容	`string`	`-`
cancel-text	取消按钮的内容	`string`	`-`
ok-loading	确认按钮是否为加载中状态	`boolean`	`false`
ok-button-props	确认按钮的Props	`ButtonProps`	`-`
cancel-button-props	取消按钮的Props	`ButtonProps`	`-`
footer	是否展示页脚部分	`boolean`	`true`
render-to-body	对话框是否挂载在 `body` 元素下	`boolean`	`true`
popup-container	弹出框的挂载容器	`string \| HTMLElement`	`'body'`
mask-style	蒙层的样式	`CSSProperties`	`-`
modal-class	对话框的类名	`string \| any[]`	`-`
modal-style	对话框的样式	`CSSProperties`	`-`
on-before-ok	触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。	`(done: (closed: boolean \| any) => void) => void \| boolean \| Promise<void \| boolean>`	`-`	1.0.0
on-before-cancel	触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。	`() => boolean`	`-`	1.0.0
esc-to-close	是否支持 ESC 键关闭对话框	`boolean`	`true`	1.0.0
draggable	是否支持拖动	`boolean`	`true`	1.0.0
fullscreen	是否开启全屏	`boolean`	`false`	1.0.0
mask-animation-name	遮罩层动画名字	`string`	`-`	1.0.0
modal-animation-name	对话框动画名字	`string`	`-`	1.0.0
body-class	对话框内容部分的类名	`string \| any[]`	`-`	1.0.0
body-style	对话框内容部分的样式	`StyleValue`	`-`	1.0.0
hide-title	是否隐藏标题	`boolean`	`false`	1.0.0

`<modal>` Events

事件名	描述	参数	版本
ok	点击确定按钮时触发	ev: `MouseEvent`
cancel	点击取消、关闭按钮时触发	ev: `MouseEvent \| KeyboardEvent`
open	对话框打开后（动画结束）触发	-
close	对话框关闭后（动画结束）触发	-
before-open	对话框打开前触发	-	1.0.0
before-close	对话框关闭前触发	-	1.0.0

`<modal>` Slots

插槽名	描述	参数
title	标题	-
footer	页脚	-

`<modal>` 全局方法

Modal提供的全局方法，可以通过以下三种方法使用：

通过this.$modal调用
在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$modal调用
导入Modal，通过Modal本身调用

当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext

import { createApp } from 'vue'
import { Modal } from '@erp/common';

const app = createApp(App);
Modal._context = app._context;

ModalConfig

参数名	描述	类型	默认值	版本
title	标题	`RenderContent`	`-`
content	内容	`RenderContent`	`-`
footer	页脚	`boolean \| RenderContent`	`true`
closable	是否显示关闭按钮	`boolean`	`true`
okText	确认按钮的内容	`string`	`-`
cancelText	取消按钮的内容	`string`	`-`
okButtonProps	确认按钮的Props	`ButtonProps`	`-`
cancelButtonProps	取消按钮的Props	`ButtonProps`	`-`
okLoading	确认按钮是否为加载中状态	`boolean`	`false`
hideCancel	是否隐藏取消按钮	`boolean`	`false`
mask	是否显示遮罩层	`boolean`	`true`
simple	是否开启简单模式	`boolean`	`false`
maskClosable	是否点击遮罩层可以关闭对话框	`boolean`	`true`
maskStyle	蒙层的样式	`CSSProperties`	`-`
alignCenter	对话框是否居中显示	`boolean`	`true`
escToClose	是否支持 ESC 键关闭对话框	`boolean`	`true`	1.0.0
draggable	是否支持拖动	`boolean`	`false`	1.0.0
fullscreen	是否开启全屏	`boolean`	`false`	1.0.0
onOk	点击确定按钮的回调函数	`(e?: any) => void`	`-`
onCancel	点击取消按钮的回调函数	`(e?: any) => void`	`-`
onBeforeOk	触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。	`(done: (closed: boolean) => void) => void \| boolean \| Promise<void \| boolean>`	`-`	1.0.0
onBeforeCancel	触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。	`() => boolean`	`-`	1.0.0
onOpen	对话框打开后（动画结束）触发	`() => void`	`-`
onClose	对话框关闭后（动画结束）触发	`() => void`	`-`
onBeforeOpen	对话框打开前触发	`() => void`	`-`	1.0.0
onBeforeClose	对话框关闭前触发	`() => void`	`-`	1.0.0
width	对话框的宽度，不设置的情况下会使用样式中的宽度值	`number \| string`	`-`	1.0.0
top	对话框的距离顶部的高度，居中显示开启的情况下不生效	`number \| string`	`-`	1.0.0
titleAlign	标题的水平对齐方向	`'start' \| 'center'`	`'center'`	1.0.0
renderToBody	对话框是否挂载在 `body` 元素下	`boolean`	`true`
popupContainer	弹出框的挂载容器	`string \| HTMLElement`	`'body'`
modalClass	对话框的类名	`string \| any[]`	`-`
modalStyle	对话框的样式	`CSSProperties`	`-`
maskAnimationName	遮罩层动画名字	`string`	`-`	1.0.0
modalAnimationName	对话框动画名字	`string`	`-`	1.0.0
hideTitle	是否隐藏标题	`boolean`	`false`	1.0.0
bodyClass	对话框内容部分的类名	`string \| any[]`	`-`
bodyStyle	对话框内容部分的样式	`StyleValue`	`-`
model	数据模型	`any`	`-`

ModalReturn

参数名	描述	类型	默认值	版本
close	关闭对话框	`() => void`	`-`
update	更新对话框	`(config: ModalUpdateConfig) => void`	`-`	1.0.0
container	over html	`HTMLElement`	`-`

ModalMethod

参数名	描述	类型	默认值
open	打开对话框	`(config: ModalConfig, appContext?: AppContext) => ModalReturn`	`-`
confirm	打开对话框（简单模式）	`(config: ModalConfig, appContext?: AppContext) => ModalReturn`	`-`
info	打开信息对话框	`(config: ModalConfig, appContext?: AppContext) => ModalReturn`	`-`
success	打开成功对话框	`(config: ModalConfig, appContext?: AppContext) => ModalReturn`	`-`
warning	打开警告对话框	`(config: ModalConfig, appContext?: AppContext) => ModalReturn`	`-`
error	打开错误对话框	`(config: ModalConfig, appContext?: AppContext) => ModalReturn`	`-`

Form 动态表单

SearchForm 查询表单

Table 数据表格

在当前页面打开一个浮层，承载相关操作。

基本用法

异步关闭

函数调用

消息提示

对话框的宽度

定制按钮文字

弹出层表单

可拖动

全屏

API

ModalConfig

ModalReturn

ModalMethod

Modal 对话框 ​

在当前页面打开一个浮层，承载相关操作。 ​

基本用法 ​

异步关闭 ​

函数调用 ​

消息提示 ​

对话框的宽度 ​

定制按钮文字 ​

弹出层表单 ​

可拖动 ​

全屏 ​

API ​

<modal> Props ​

<modal> Events ​

<modal> Slots ​

<modal> 全局方法 ​

ModalConfig ​

ModalReturn ​

ModalMethod ​

Modal 对话框

在当前页面打开一个浮层，承载相关操作。

基本用法

异步关闭

函数调用

消息提示

对话框的宽度

定制按钮文字

弹出层表单

可拖动

全屏

API

`<modal>` Props

`<modal>` Events

`<modal>` Slots

`<modal>` 全局方法

ModalConfig

ModalReturn

ModalMethod