消息提示组件 (Message)

Element UI 的 Message 组件用于在页面中显示操作反馈或提示信息。与 Notification 组件不同，Message 更适合用于局部的、与用户操作相关的反馈。

提示

Message 组件官方文档：https://element.eleme.cn/#/zh-CN/component/message (opens new window)

1. 基本用法

基本语法：通过调用 this.$message 方法，可以在页面上显示一个消息提示。你可以传递配置选项来定制消息的内容、样式和行为。

<template>
  <el-button type="primary" @click="showMessage">显示消息</el-button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message({
        message: '操作成功',
        type: 'success',
        duration: 2000
      });
    }
  }
};
</script>

• message：消息的文本内容，可以是字符串或 VNode（即 Vue 虚拟节点）。
• type：消息的类型，定义了消息的主题颜色。可选值为 success、warning、info、error。
• duration：消息的显示时间，单位是毫秒。默认值为 3000 毫秒，设为 0 则不会自动关闭。

基础简写形式

Message 组件支持通过简写形式来调用不同类型的消息提示。简写形式让你可以更方便地调用 success、warning、info 和 error 类型的消息提示。如果你只需要显示默认配置的消息提示，可以直接传递一段文本，不需要额外的配置：

<template>
  <el-button type="primary" @click="showMessage">显示简写消息</el-button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message.success('操作成功');
      this.$message.warning('警告信息');
      this.$message.info('提示信息');
      this.$message.error('操作失败');
    }
  }
};
</script>

• this.$message.success('操作成功')：显示一个默认配置的 success 主题消息提示。
• this.$message.warning('警告信息')：显示一个默认配置的 warning 主题消息提示。
• this.$message.info('提示信息')：显示一个默认配置的 info 主题消息提示。
• this.$message.error('操作失败')：显示一个默认配置的 error 主题消息提示。

配置简写形式

简写形式除了直接传递文本，还可以接收一个配置对象。此时，不需要再配置消息的 type，只需配置其他属性即可：

<template>
  <el-button type="primary" @click="showCustomMessage">显示自定义简写消息</el-button>
</template>

<script>
export default {
  methods: {
    showCustomMessage() {
      this.$message.success({
        message: '操作成功',
        duration: 5000,  // 显示时间 5 秒
        center: true     // 文字居中
      });

      this.$message.warning({
        message: '警告信息',
        duration: 10000, // 显示时间 10 秒
        showClose: true  // 显示关闭按钮
      });

      this.$message.info({
        message: '提示信息',
        duration: 3000,  // 显示时间 3 秒
        customClass: 'my-info-message' // 自定义类名
      });

      this.$message.error({
        message: '操作失败',
        duration: 0,     // 永不自动关闭
        showClose: true  // 显示关闭按钮
      });
    }
  }
};
</script>

<style>
.my-info-message {
  background-color: #f0f9eb;
  border-left: 5px solid #67c23a;
  color: #67c23a;
}
</style>

2. Message 属性

参数	说明	类型	可选值	默认值
message	消息文字	string / VNode	—	—
type	主题	string	success / warning / info / error	info
iconClass	自定义图标的类名，会覆盖 type	string	—	—
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	—	false
customClass	自定义类名	string	—	—
duration	显示时间，单位为毫秒。设为 0 则不会自动关闭	number	—	3000
showClose	是否显示关闭按钮	boolean	—	false
center	文字是否居中	boolean	—	false
onClose	关闭时的回调函数，参数为被关闭的 message 实例	function	—	—
offset	Message 距离窗口顶部的偏移量	number	—	20

• iconClass：如果不使用默认的主题图标，你可以通过 iconClass 设置自定义的图标类名。
• dangerouslyUseHTMLString：当 true 时，message 属性中的内容将被作为 HTML 片段处理，可能带来 XSS 风险，谨慎使用。
• showClose：设置为 true 时，会显示一个关闭按钮，用户可以手动关闭消息。
• center：设置为 true 时，消息文本将水平居中显示。

3. Message 方法

调用 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用实例的 close 方法。

• showClose 设置为 true，显示关闭按钮。
• close：用于关闭当前的 Message，该方法用于在指定时间后手动关闭消息。

<template>
  <el-button type="primary" @click="showClosableMessage">显示可关闭的消息</el-button>
</template>

<script>
export default {
  methods: {
    showClosableMessage() {
      const messageInstance = this.$message({
        message: '点击按钮关闭此消息',
        type: 'info',
        showClose: true
      });

      // 手动关闭消息
      setTimeout(() => {
        messageInstance.close();
      }, 5000);
    }
  }
};
</script>

4. 不同类型的消息提示

Element UI 提供了四种主题的消息提示，分别用于展示成功、警告、信息和错误类型的消息。

• 根据 type 属性的不同，Message 会使用不同的颜色和图标来显示消息。
• type 的可选值包括 success、warning、info 和 error。

<template>
  <el-button @click="showSuccessMessage">成功</el-button>
  <el-button @click="showWarningMessage">警告</el-button>
  <el-button @click="showInfoMessage">信息</el-button>
  <el-button @click="showErrorMessage">错误</el-button>
</template>

<script>
export default {
  methods: {
    showSuccessMessage() {
      this.$message.success('操作成功');
    },
    showWarningMessage() {
      this.$message.warning('警告信息');
    },
    showInfoMessage() {
      this.$message.info('提示信息');
    },
    showErrorMessage() {
      this.$message.error('操作失败');
    }
  }
};
</script>

5. 文字居中

通过设置 center 属性，可以让消息内容在消息框中水平居中显示。

<template>
  <el-button type="primary" @click="showCenteredMessage">居中文字消息</el-button>
</template>

<script>
export default {
  methods: {
    showCenteredMessage() {
      this.$message({
        message: '操作成功',
        type: 'success',
        center: true,
        duration: 3000
      });
    }
  }
};
</script>

6. 自定义样式与图标

你可以通过 customClass 和 iconClass 自定义消息的样式和图标。

• customClass 用于自定义消息框的样式，例如背景颜色、边框和文字颜色。
• iconClass 可以指定自定义图标，例如使用 Element UI 提供的图标库中的 el-icon-bell 图标

<template>
  <el-button @click="showCustomMessage">自定义消息</el-button>
</template>

<script>
export default {
  methods: {
    showCustomMessage() {
      this.$message({
        message: '这是一个自定义消息',
        type: 'info',
        customClass: 'my-message',
        iconClass: 'el-icon-bell'
      });
    }
  }
};
</script>

<style>
.my-message {
  background-color: #f0f9eb;
  border-left: 5px solid #67c23a;
  color: #67c23a;
}
</style>

7. HTML 内容消息

如果你希望在消息中展示 HTML 内容，可以使用 dangerouslyUseHTMLString 属性。

<template>
  <el-button @click="showHTMLMessage">HTML 内容消息</el-button>
</template>

<script>
export default {
  methods: {
    showHTMLMessage() {
      this.$message({
        message: '<strong>这是一个<b>HTML</b>消息</strong>',
        dangerouslyUseHTMLString: true
      });
    }
  }
};
</script>

注意：使用 dangerouslyUseHTMLString 时，必须非常小心，以避免 XSS 攻击。

:: tip 总结

• 灵活的配置：Message 组件支持多种类型、样式和显示时长的配置，适合不同场景下的操作反馈。
• 易于集成：通过简单的 this.$message 调用，可以在项目中快速实现用户反馈功能。
• 自定义能力：支持自定义样式和图标，满足各种视觉需求。
• 简写形式：可以通过简写形式快速调用不同类型的消息提示。
• 文字居中：通过 center 属性，可以使消息文本在消息框中水平居中。

:::