今天教大家使用vue2封装一个全局可用的message提示组件

像element-ui，ViewDesgin这种组件库我们肯定使用过，当我们用message组件的时候可以直接this.$Message.loadong/success/error，... 那么这个是怎么实现的呢，今天教大家实现一个message组件挂载到vue全局

1、创建一个Message组件，在components目录下新建一个MessageComponent.vue;随便写点什么上去先

 2、在iconfont.cn中找自己需要的图标

下载下来后解压，在assets目录下新建icon文件夹 ，将以下的代码复制到icon文件中：

 记得改一下引入的地址：

在MessageComponent中引入字体图标：

好了，至此字体图标已经完成了。

3、核心逻辑 ：

编写 omponents文件夹下的 MessageComponent.js 入口文件，首先定义一个全局变量避免组件多次创建，然后实现 install 方法，因为 Vue.use() 会调用 install ，那自然我们就可以在 intsall 方法参数里获取到 Vue实例了。

我们通过 Vue.extend 创建一个组件构造器，传入之前编写好的组件 MessageComponent.vue ，这样组件构造器就定义好了，使用 new 关键字对组件进行实例化得到一个组件实例 MessageInstanse。

然后将组件实例挂载到DOM，至此插件的核心逻辑就完成了。

import Message from './MessageComponent.vue'
let MessageInstanse = null
const MessagePlugin = {
  install(Vue) {
    if (!MessageInstanse) {
      // Vue.extend() 方法创建了一个名为 MessageComponent 的组件构造器。
      const MessageComponent = Vue.extend(Message);
      MessageInstanse = new MessageComponent();
      // 将通知组件挂载到DOM中
      const container = document.createElement("div");
      document.body.appendChild(container);
      MessageInstanse.$mount(container);
    }
}
export default MessagePlugin

4、下面我们在 main.js 中引入插件并使用。

// 全局的插件
import MessagePlugin from './components/MessageComponent'
Vue.use(MessagePlugin)

 启动项目并在浏览器打开，可以看到组件成功挂在到DOM。

5、实现通知方法：

想通过 this.$notify.success() 这样的方式调用，上面可以拿到Vue实例了，给实例原型添加属性；在MessageComponent.js中：添加了四个方法

Vue.prototype.$Message = {
      // 加载
      loading: (message, duration = 1000 * 60 * 60 * 24) => {
        MessageInstanse.showMessage(message, 'loading', duration)
      },
      // 成功
      success: (message, duration) => {
        MessageInstanse.showMessage(message, 'success', duration)
      },
      // 失败
      error: (message, duration) => {
        MessageInstanse.showMessage(message, 'error', duration)
      },
      // 警告
      warning: (message, duration) => {
        MessageInstanse.showMessage(message, 'warning', duration)
      },
      // 关闭
      close: () => {
        MessageInstanse.closeMessage()
      }
    }

上面代码呢，我们给Vue原型添加了$Message 对象，对象中编写了我们需要的通知方法，然后呢我们通过通知组件实例 MessageInstanse去调用他的 showMessage 方法去打开通知，closeMessage 方法关闭通知。

打开通知时，第一个参数是通知内容，第二个就是消息类类型，第三个是延时参数

MessageComponent.js全部代码如下：

import Message from './MessageComponent.vue'
let MessageInstanse = null
const MessagePlugin = {
  install(Vue) {
    if (!MessageInstanse) {
      // Vue.extend() 方法创建了一个名为 MessageComponent 的组件构造器。
      const MessageComponent = Vue.extend(Message);
      MessageInstanse = new MessageComponent();
      // 将通知组件挂载到DOM中
      const container = document.createElement("div");
      document.body.appendChild(container);
      MessageInstanse.$mount(container);
    }
    Vue.prototype.$Message = {
      // 加载
      loading: (message, duration = 1000 * 60 * 60 * 24) => {
        MessageInstanse.showMessage(message, 'loading', duration)
      },
      // 成功
      success: (message, duration) => {
        MessageInstanse.showMessage(message, 'success', duration)
      },
      // 失败
      error: (message, duration) => {
        MessageInstanse.showMessage(message, 'error', duration)
      },
      // 警告
      warning: (message, duration) => {
        MessageInstanse.showMessage(message, 'warning', duration)
      },
      // 关闭
      close: () => {
        MessageInstanse.closeMessage()
      }
    }
  }
}
export default MessagePlugin

6、实现两个方法：

在MessageComponent.vue中，组件实现打开和关闭通知的逻辑，使用 setTimeout 定时器，

通知显示与隐藏，使用translate和transition过度动画，代码如下：

上述showMessage方法中代码都一样。我们可以抽离出一个方法叫base 

 base(type, duration) {
      this.type = type;
      this.duration = duration || 2000;
  },

修改如下：

base(type, duration) {
      this.type = type;
      this.duration = duration || 2000;
    },
    // 打开的方法
    showMessage(message, type, duration) {
      if(type === 'success') {
        this.message = message || '这是一条成功消息';
        this.base(type, duration)
      }
      else if (type === 'error') {
        this.message = message || '这是一条失败消息';
        this.base(type, duration)
      }
      else if (type === 'warning') {
        this.message = message || '这是一条警告消息';
        this.base(type, duration)
      }
      else if (type === 'loading') {
        this.message = message || '这是一条加载消息';
        this.base(type, duration)
      }
      // 过渡
      this.$refs.message.style.transform = "translate(-50%,75px)";
      if (this.timer) {
        this.timer = clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.closeMessage();
      }, this.duration);
    }

7、测试组件：

按钮也是自己封装的按钮，根据传递的类型更改按钮的大小尺寸和颜色背景是否禁用。点击对应的按钮会弹出下滑效果的提示，加载按钮的提示图标加了一直旋转的动画更美观，加载成功就会弹出成功提示的消息 点击关闭就会触发关闭的回调