Vue3 新手入门：借助 Vue.js 插件封装消息框组件

在 Vue3 的开发之旅中，封装消息框组件是一项实用且能提升用户体验的技能。借助 Vue.js 插件，我们可以更高效地实现这一目标。

了解一下为什么要封装消息框组件。在实际项目里，消息提示功能必不可少，比如操作成功或失败的反馈。将其封装成组件，能提高代码的复用性，让项目结构更清晰。

创建一个 Vue.js 插件来封装消息框组件是个不错的办法。我们先在项目中新建一个文件，比如 messagePlugin.js。在这个文件里，定义一个函数作为插件的入口。

import { createApp } from 'vue';

const messagePlugin = {
  install(app) {
    // 这里定义消息框相关的逻辑
    const messageBox = {
      show(message) {
        // 创建一个临时的 DOM 元素来显示消息
        const tempDiv = document.createElement('div');
        tempDiv.textContent = message;
        tempDiv.style.position = 'fixed';
        tempDiv.style.top = '10px';
        tempDiv.style.left = '10px';
        tempDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        tempDiv.style.color = 'white';
        tempDiv.style.padding = '10px';
        tempDiv.style.borderRadius = '5px';
        document.body.appendChild(tempDiv);

        // 一段时间后移除消息框
        setTimeout(() => {
          document.body.removeChild(tempDiv);
        }, 3000);
      }
    };

    app.config.globalProperties.$message = messageBox;
  }
};

export default messagePlugin;

上述代码中，我们在 install 方法里定义了消息框的显示逻辑。通过创建一个临时的 div 元素，设置其样式并添加到 document.body 上，实现消息的展示，3 秒后移除。将 messageBox 挂载到 app.config.globalProperties.$message 上，方便在组件中使用。

接下来，在 main.js 里引入并使用这个插件：

import { createApp } from 'vue';
import App from './App.vue';
import messagePlugin from './messagePlugin';

const app = createApp(App);
app.use(messagePlugin);
app.mount('#app');

在组件中使用消息框就变得很简单：

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

<script setup>
const showMessage = () => {
  $message.show('操作成功！');
};
</script>

通过这种方式，Vue3 新手也能轻松借助 Vue.js 插件封装出实用的消息框组件，为项目开发增添便利。