Vue中的this.$message怎么实现

在Vue.js开发中，this.$message是一个非常常用的功能，通常用于在页面上显示一些提示信息，比如成功、警告、错误等。本文将详细介绍如何在Vue项目中实现this.$message功能。

1. 使用Element UI的Message组件

Element UI是一个非常流行的Vue.js UI组件库，它提供了一个Message组件，可以方便地实现this.$message功能。

1.1 安装Element UI

首先，我们需要在项目中安装Element UI：

npm install element-ui --save

1.2 引入Element UI

在项目的main.js文件中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

1.3 使用this.$message

在Vue组件中，我们可以直接使用this.$message来显示提示信息：

export default {
  methods: {
    showMessage() {
      this.$message({
        message: '这是一条成功消息',
        type: 'success'
      });
    }
  }
}

1.4 不同类型的消息

this.$message支持多种类型的消息，包括success、warning、info和error：

this.$message.success('这是一条成功消息');
this.$message.warning('这是一条警告消息');
this.$message.info('这是一条信息消息');
this.$message.error('这是一条错误消息');

2. 自定义实现this.$message

如果你不想使用Element UI，也可以自己实现一个简单的this.$message功能。

2.1 创建Message组件

首先，我们创建一个Message.vue组件：

<template>
  <div class="message" :class="type">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String,
    type: {
      type: String,
      default: 'info'
    }
  }
}
</script>

<style scoped>
.message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
}

.success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.error {
  background-color: #fef0f0;
  color: #f56c6c;
}

.info {
  background-color: #f4f4f5;
  color: #909399;
}
</style>

2.2 创建Message插件

接下来，我们创建一个message.js插件：

import Vue from 'vue';
import Message from './Message.vue';

const MessageConstructor = Vue.extend(Message);

const message = (options) => {
  const instance = new MessageConstructor({
    propsData: options
  }).$mount();

  document.body.appendChild(instance.$el);

  setTimeout(() => {
    document.body.removeChild(instance.$el);
  }, 3000);
};

export default {
  install(Vue) {
    Vue.prototype.$message = message;
  }
};

2.3 使用自定义的this.$message

在main.js中引入并使用自定义的message插件：

import Vue from 'vue';
import message from './plugins/message';

Vue.use(message);

现在，你就可以在Vue组件中使用this.$message了：

export default {
  methods: {
    showMessage() {
      this.$message({
        message: '这是一条成功消息',
        type: 'success'
      });
    }
  }
}

3. 总结

通过以上两种方式，我们可以在Vue项目中实现this.$message功能。使用Element UI的Message组件可以快速实现，而自定义实现则更加灵活，适合有特殊需求的场景。根据项目的实际需求，选择合适的方式来实现this.$message功能。