Vue3封装Message消息提示实例函数，让开发更轻松！

2023-10-20 00:24:03

使用 Vue3 封装 Message 消息提示实例函数

在 Vue 项目中，经常需要在页面上显示各种类型的消息提示，如成功、失败、警告等。使用传统的弹窗方式固然可行，但这种方式通常比较繁琐，而且缺乏灵活性。

为了简化消息提示的开发，Vue3 提供了 app.config.globalProperties 属性，它允许你为 Vue 实例添加全局属性和方法。利用这个特性，我们可以封装一个 Message 消息提示实例函数，从而实现更灵活、更易用的消息提示功能。

封装 Message 消息提示实例函数的步骤

1. 创建 Vue 实例

首先，你需要创建一个 Vue 实例，然后使用 app.config.globalProperties 属性为它添加一个全局属性。这个全局属性就是 Message 消息提示实例函数。

const app = createApp(App);
app.config.globalProperties.$message = function (message, type) {
  // 你的代码
};

2. 实现 Message 消息提示实例函数

在 Message 消息提示实例函数中，你需要实现消息提示的具体逻辑。你可以根据不同的消息类型，显示不同的样式和效果。

app.config.globalProperties.$message = function (message, type) {
  if (!message) {
    return;
  }

  // 根据type设置消息提示的样式和效果
  let messageType = 'success';
  if (type === 'error') {
    messageType = 'error';
  } else if (type === 'warning') {
    messageType = 'warning';
  }

  // 显示消息提示
  const toast = createElement('div', {
    class: `toast ${messageType}`,
  }, message);
  document.body.appendChild(toast);

  // 3秒后自动消失
  setTimeout(() => {
    toast.remove();
  }, 3000);
};

3. 使用 Message 消息提示实例函数

封装好 Message 消息提示实例函数后，你就可以在任何 Vue 组件中使用它了。只需要在组件中调用 this.$message() 方法，就可以显示消息提示。

this.$message('操作成功！');

示例代码

为了更好地理解如何使用 Message 消息提示实例函数，我们准备了一个简单的例子。在这个例子中，我们将在一个按钮点击事件中使用 Message 消息提示实例函数来显示一条成功消息。

<template>
  <button @click="showMessage">显示消息</button>
</template>

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