ERP 组件库

Appearance

通知提醒框 Notification ​

全局展示通知提醒，将信息及时有效的传达给用户。 ​

基本用法 ​

通知提醒框的基本用法。

代码事例
vue
<template>
  <fk-space>
    <fk-button
type="primary" @click="() => $notification.info({
      title:'Notification',
      content:'This is a notification!'
    })"
    >
      Open Notification
    </fk-button>
    <fk-button @click="handleNotification">
      Open Notification
    </fk-button>
  </fk-space>
</template>

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

export default {
  setup() {
    const handleNotification = () => {
      Notification.info({
        title: 'Notification',
        content: 'This is a notification!',
      })
    }

    return { handleNotification }
  }
}
</script>

消息类型 ​

通知提醒框的消息类型。

代码事例
vue
<template>
  <fk-space>
    <fk-button
      type='primary'
      @click="() => $notification.info('This is an info message!')"
    >
      Info
    </fk-button>
    <fk-button
      type='primary'
      status="success"
      @click="() => $notification.success('This is a success message!')"
    >
      Success
    </fk-button>
    <fk-button
      type='primary'
      status="warning"
      @click="() => $notification.warning('This is a warning message!')"
    >
      Warning
    </fk-button>
    <fk-button
      type='primary'
      status="danger"
      @click="() => $notification.error('This is an error message!')"
    >
      Error
    </fk-button>
    <fk-button
      type='secondary'
      @click="() => $notification.info({
        content: 'This is an error message!',
        showIcon: false
      })"
    >
      Normal
    </fk-button>
  </fk-space>
</template>

全局提示的位置 ​

通知提醒框有 4 种不同的弹出位置，分别为：左上角, 右上角 (默认), 左下角, 右下角。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary" @click="handleNotification"> Top Right </fk-button>
    <fk-button type="primary" @click="handleNotificationTopLeft"> Top Left </fk-button>
    <fk-button type="primary" @click="handleNotificationBottomRight"> Bottom Right </fk-button>
    <fk-button type="primary" @click="handleNotificationBottomLeft"> Bottom Left </fk-button>
  </fk-space>
</template>

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

export default {
  setup() {
    const handleNotification = () => {
      Notification.info({
        title: 'Title',
        content: 'This is a Notification!',
      })
    }

    const handleNotificationTopLeft = () => {
      Notification.info({
        title: 'Title',
        content: 'This is a Notification!',
        position: "topLeft"
      })
    }

    const handleNotificationBottomRight = () => {
      Notification.info({
        title: 'Title',
        content: 'This is a Notification!',
        position: 'bottomRight'
      })
    }

    const handleNotificationBottomLeft = () => {
      Notification.info({
        title: 'Title',
        content: 'This is a Notification!',
        position: "bottomLeft"
      })
    }

    return {
      handleNotification,
      handleNotificationTopLeft,
      handleNotificationBottomRight,
      handleNotificationBottomLeft
    }
  }
}
</script>

更新通知内容 ​

通过指定参数 id，可以更新已经存在的通知提醒框。

代码事例
vue
<template>
  <fk-button type="primary" @click="handleNotification">
    Open Notification
  </fk-button>
</template>

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

export default {
  setup() {
    const handleNotification = () => {
      Notification.warning({
        id: 'your_id',
        title: 'Ready to update',
        content: 'Will update after 2 seconds...',
      })

      setTimeout(() => {
        Notification.success({
          id: 'your_id',
          title: 'Success',
          content: 'Update success!',
        });
      }, 2000)
    }

    return { handleNotification }
  }
}
</script>

更新延迟 ​

通过指定参数 id，可以更新已经存在的通知提醒框。

代码事例
vue
<template>
  <fk-button type="primary" @click="handleNotification">
    Open Notification
  </fk-button>
</template>

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

export default {
  setup() {
    const handleNotification = () => {
      Notification.warning({
        id: 'your_id',
        title: 'Ready to update',
        content: 'Will update after 2 seconds...',
        duration: 0,
      })

      setTimeout(() => {
        Notification.success({
          id: 'your_id',
          title: 'Success',
          content: 'Update success!',
          duration: 3000,
        });
      }, 2000)
    }

    return { handleNotification }
  }
}
</script>

自定义操作按钮 ​

通过指定 btn 字段，可以添加操作按钮。

代码事例
vue
<template>
  <fk-button type="primary" @click="handleNotification">
    Open Notification
  </fk-button>
</template>

<script lang="jsx">
import { Button, Notification, Space } from '@erp/common';

export default {
  setup() {
    const handleNotification = () => {
      const id = `${Date.now()}`;
      const closeNotification =  Notification.info({
        id,
        title:'Notification',
        content:'This is a notification!',
        duration: 0,
        footer: <Space>
          <Button
            type="secondary"
            size="small"
            onClick={() => Notification.remove(id)}
          >
            Cancel
          </Button>
          <Button type="primary" size="small" onClick={closeNotification}>
            Ok
          </Button>
        </Space>
      })
    }

    return { handleNotification }
  }
}
</script>

自定义关闭按钮 ​

需要设置 closable: true，自定义元素使用 closeIconElement，仅图标使用 closeIcon (会有 hover 样式)。

代码事例
vue
<template>
  <fk-space>
    <fk-button type="primary" @click="handleNotification">
      Open Notification
    </fk-button>
    <fk-button type="primary" status="danger" @click="handleNotification2">
      Open Notification
    </fk-button>
  </fk-space>
</template>

<script lang="jsx">
import { Button, Notification } from '@erp/common';
import { IconCloseCircle } from '@erp/common';

export default {
  setup() {
    const handleNotification = () => {
      Notification.info({
        title:'Notification',
        content:'This is a notification!',
        closable: true,
        closeIcon: <IconCloseCircle />
      })
    }

    const handleNotification2 = () => {
      Notification.error({
        title:'Notification',
        content:'This is a notification!',
        closable: true,
        closeIconElement: <Button size="mini">Close</Button>
      })
    }

    return { handleNotification, handleNotification2 }
  }
}
</script>

自定义样式 ​

可以设置 style 和 class 来定制样式。

代码事例
vue
<template>
  <fk-button type="primary" @click="handleNotification">
    Open Notification
  </fk-button>
</template>

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

export default {
  setup() {
    const handleNotification = () => {
      Notification.info({
        title: 'Notification',
        content: 'This is a notification!',
        closable: true,
        style: { width: '500px' }
      })
    }

    return { handleNotification }
  }
}
</script>

API ​

NotificationMethod ​

参数名描述类型默认值
info显示信息提醒框(config: string | NotificationConfig, appContext?: AppContext) => NotificationReturn-
success显示成功提醒框(config: string | NotificationConfig, appContext?: AppContext) => NotificationReturn-
warning显示警告提醒框(config: string | NotificationConfig, appContext?: AppContext) => NotificationReturn-
error显示错误提醒框(config: string | NotificationConfig, appContext?: AppContext) => NotificationReturn-
remove清除对应 id 的提醒框(id: string) => void-
clear清除全部提醒框(position?: NotificationPosition) => void-

NotificationConfig ​

参数名描述类型默认值版本
content内容RenderContent-
title标题RenderContent-
icon图标RenderFunction-
id唯一idstring-
style样式CSSProperties-
class样式类名ClassName-
position位置'topLeft'|'topRight'|'bottomLeft'|'bottomRight'-
showIcon是否显示图标booleantrue
closable是否可关闭booleanfalse
duration显示的持续时间，单位为 msnumber3000
footer底部内容RenderFunction-1.0.0
closeIcon关闭按钮图标RenderFunction-
closeIconElement关闭按钮元素RenderFunction-
onClose关闭时的回调函数(id: number | string) => void-

NotificationReturn ​

参数名描述类型默认值
close关闭当前通知提醒框() => void-

Notification 全局方法 ​

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

  1. 通过 this.$notification 调用
  2. 在 Composition API 中，通过 getCurrentInstance().appContext.config.globalProperties.$notification 调用
  3. 导入 Notification，通过 Notification 本身调用

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

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

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

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team