仿照Element-ui实现一个简易的$message方法

这是一个完整的攻略，步骤如下：

步骤一：创建组件

首先，我们需要创建一个Vue组件来实现这个消息框功能。

我们可以在src/components目录下创建一个messageBox.vue文件，并在其中写入以下代码：

<template>
  <div v-show="visible" :class="['message-box', type]">
    <div class="message-box-container">
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
      type: 'info'
    }
  },
  methods: {
    show(message, options) {
      this.message = message
      if (options && options.type) {
        this.type = options.type
      }
      this.visible = true
      setTimeout(() => {
        this.visible = false
      }, 2000)
    }
  }
}
</script>

<style>
.message-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #f0f9eb;
  color: #67c23a;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  z-index: 99999;
}
.message-box.success {
  background-color: #f0f0f0;
  color: #409eff;
}
.message-box.error {
  background-color: #fde2e2;
  color: #f56c6c;
}
.message-box.warning {
  background-color: #f0f9eb;
  color: #e6a23c;
}
.message-box-container {
  max-width: 80%;
  text-align: center;
}
</style>

这个组件的实现非常简单。我们在data()方法中定义了一些数据变量和默认值。然后，我们定义了一个show()方法来显示组件并设置消息内容和类型参数。最后，我们使用setTimeout()方法来自动隐藏消息框。

在HTML部分，我们使用Vue的条件渲染功能来控制消息框的显示和隐藏。在样式方面，我们使用了一些简单的CSS样式，使消息框看起来很漂亮。

步骤二：注册组件并使用

接下来，我们需要在我们的Vue应用程序中注册该组件，并在需要的时候使用它。

在src/main.js中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import MessageBox from './components/messageBox.vue'

Vue.config.productionTip = false

Vue.component('message-box', MessageBox)

new Vue({
  render: h => h(App),
}).$mount('#app')

这里我们向Vue注册了一个名为message-box的组件，并将其指向了刚才创建的messageBox.vue文件。

接下来，我们在Vue的实际使用场景中使用该组件。在App.vue中添加以下代码：

<template>
  <div id="app">
    <button @click="showSuccess">显示成功消息</button>
    <button @click="showError">显示错误消息</button>
    <button @click="showWarning">显示警告消息</button>

    <message-box ref="messageBox"></message-box>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showSuccess() {
      this.$refs.messageBox.show('操作成功', { type: 'success' })
    },
    showError() {
      this.$refs.messageBox.show('操作失败', { type: 'error' })
    },
    showWarning() {
      this.$refs.messageBox.show('警告', { type: 'warning' })
    }
  }
}
</script>

<style>
button {
  margin: 20px;
  padding: 10px;
  font-size: 16px;
}
</style>

这里我们创建了三个按钮，分别用来展示成功、错误和警告消息。当用户点击按钮时，我们调用show()方法，并传递相关参数。

现在，我们已经完成了仿照Element UI实现一个简易的$message方法的步骤，并可以使用我们自己创建的messageBox组件来展示不同类型的消息。

示例一：

当我们点击“显示成功消息”按钮时，页面上会出现一个绿色背景、白色字体的操作成功消息，2秒后自动消失。

示例二：

当我们点击“显示错误消息”按钮时，页面上会出现一个浅红色背景、深红色字体的操作失败消息，2秒后自动消失。