全局提示 Message

由用户的操作触发的轻量级全局反馈。

基本用法

全局提示的基本用法。

---

代码事例

<template>
  <fk-button @click="handleClick">Info Message</fk-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$message.info('This is an info message')
    }
  }
};
</script>

消息类型

全局提示有 6 种不同的类型，分别为：info, success, warning, error, loading。2.41.0 版本增加 normal 类型，此类型下默认没有图标。

---

代码事例

<template>
  <div>
    <fk-space>
      <fk-button @click="()=>$message.info('This is an info message!')">Info Message</fk-button>
      <fk-button status="success" @click="()=>$message.success('This is a success message!')">Success Message
      </fk-button>
      <fk-button status="warning" @click="()=>$message.warning('This is a warning message!')">Warning Message
      </fk-button>
      <fk-button status="danger" @click="()=>$message.error('This is an error message!')">Error Message</fk-button>
    </fk-space>
  </div>
  <div style="margin-top: 20px">
    <fk-space>
      <fk-button @click="()=>$message.normal('This is a normal message!')">Normal Message</fk-button>
      <fk-button
@click="()=>$message.normal({
    content:'This is a normal message!',
    icon:renderIcon
    })">Normal Message With Icon
      </fk-button>
      <fk-button status="primary" @click="()=>$message.loading('This is a loading message!')">Loading Message
      </fk-button>
    </fk-space>
  </div>
</template>

<script>
import { h } from 'vue';
import { IconExclamationCircleFill } from '@erp/common';

export default {
  setup() {
    const renderIcon = () => h(IconExclamationCircleFill);
    return {
      renderIcon
    }
  }
};
</script>

自定义图标

设置 icon 来自定义图标。

---

代码事例

<template>
  <fk-button @click="handleClick">Info Message</fk-button>
</template>

<script>
import { h } from 'vue';
import { IconFaceSmileFill } from '@erp/common';

export default {
  methods: {
    handleClick() {
      this.$message.info({
        content: 'This is an info message!',
        icon: () => h(IconFaceSmileFill)
      });
    }
  }
}
</script>

全局提示的位置

全局提示有 2 种不同的弹出位置，分别为顶部和底部。

---

代码事例

<template>
  <fk-space>
    <fk-button @click="()=>$message.info({content:'This is an info message!'})">Top Message</fk-button>
    <fk-button @click="()=>$message.info({content:'This is an info message!',position:'bottom'})">Bottom Message</fk-button>
  </fk-space>
</template>

可关闭

设置 closable 来显示关闭按钮。

---

代码事例

<template>
  <fk-button @click="handleClick">Closeable Message</fk-button>
</template>

<script>
export default {
  methods: {
    handleClick(){
      this.$message.info({
        content:'This is an info message!',
        closable: true
      })
    }
  }
};
</script>

更新内容

更新消息内容，通过设置 duration 属性可以重置定时器。

---

代码事例

<template>
  <fk-button @click="handleClick">Update Info Message</fk-button>
</template>

<script>
export default {
  data() {
    return {
      index: 0
    }
  },
  methods: {
    handleClick() {
      this.$message.info({
        id: 'myInfo',
        content: `This is an info message ${this.$data.index++}`,
        duration: 2000
      })
    }
  }
};
</script>

Message 全局方法

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

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

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

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

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

---

MessageMethod

参数名	描述	类型	默认值	版本
info	显示信息提示	(config: string | MessageConfig, appContext?: AppContext) => MessageReturn	-
success	显示成功提示	(config: string | MessageConfig, appContext?: AppContext) => MessageReturn	-
warning	显示警告提示	(config: string | MessageConfig, appContext?: AppContext) => MessageReturn	-
error	显示错误提示	(config: string | MessageConfig, appContext?: AppContext) => MessageReturn	-
loading	显示加载中提示	(config: string | MessageConfig, appContext?: AppContext) => MessageReturn	-
normal	显示提示	(config: string | MessageConfig, appContext?: AppContext) => MessageReturn	-	1.0.0
clear	清空全部提示	(position?: MessagePosition) => void	-

MessageConfig

参数名	描述	类型	默认值	版本
content	内容	RenderContent	-
id	唯一id	string	-
icon	消息的图标	RenderFunction	-
position	消息的位置	'top'|'bottom'	-
showIcon	是否显示图标	boolean	false
closable	是否显示关闭按钮	boolean	false
duration	消息显示的持续时间	number	-
onClose	关闭时的回调函数	(id: number | string) => void	-
resetOnHover	设置鼠标移入后不会自动关闭	boolean	false	1.0.0

MessageReturn

参数名	描述	类型	默认值
close	关闭当前消息	() => void	-