vue elementUI message提示框封装

在Vue中使用Element UI时，可以通过封装一个组件或方法来简化Message组件的调用。以下是一个简单的封装示例：

首先，创建一个封装的方法：

// utils.js
import { Message } from 'element-ui';
 
export function showMessage(type, message) {
  return Message({
    type: type,
    message: message,
    duration: 5000
  });
}

然后，在Vue组件中引入并使用这个封装方法：

// YourComponent.vue
<template>
  <!-- 模板内容 -->
</template>
 
<script>
import { showMessage } from '@/utils/utils.js';
 
export default {
  methods: {
    success(message) {
      showMessage('success', message);
    },
    warning(message) {
      showMessage('warning', message);
    },
    error(message) {
      showMessage('error', message);
    },
    info(message) {
      showMessage('info', message);
    }
  }
}
</script>

现在，在组件中，你可以通过调用this.success('操作成功')、this.warning('警告信息')等方法来显示对应类型的提示框。这样，你就可以在不同的组件中重复使用这些提示框，而无需重复编写相同的代码。