vue项目——自定义全局消息框组件

1.发现问题

在进行移动端适配的时候，为了在各个型号的设备上能够更好的提现结构排版，决定采用rem布局。采用rem布局的时候html的字体font-size是有一个标准的。我这边用的是750px的设计稿，就采用1rem = 100px。 

在使用的过程中会用到一些第三方UI组件，而第三方UI组件是以px单位为标准的。

使用时发现：本来应该细长的提示语句变得很大！

最后发现可能是因为这个icon是继承了html设定的font-size，尝试加一些样式上去还是无效。（如果rem布局上有直接更改第三方组件样式成功的小伙伴欢迎告诉我哟！）

2.解决问题

• 有一种方法是可以可以用 px2rem-loader 插件可以将第三方ui库的px转换成rem单位，我们在写样式的时候用px，这个插件会帮我们转换为rem单位。（因为暂时只是一个提示框遇到这样的问题，不想大费周章，所以决定暂时不用，以后再用吧嘿嘿！）
• 自己写小组件，在网上冲浪了一会，选了几个小demo实现可以了下，确实比较好！（采用这个方法！）

3.自定义全局消息组件

大概效果有点模仿 element-ui 中的提示样式，反正最后效果图如下：

vue-cli3中component下新建message文件夹，里面再建如下：

Message.vue源代码如下：

index.js源代码如下：

给Vue添加$my_message方法，判断参数，使用 $mount() 给组件手动挂载参数，然后将组件插入页面中

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

const MessageBox = Vue.extend(Message)

Message.install = function (options, type) {
  if (options === undefined || options === null) {
    options = {
      content: ''
    }
  } else if (typeof options === 'string' || typeof options === 'number') {
    options = {
      content: options
    }
    if (type !== undefined && options !== null) {
      options.type = type
    }
  }

  let instance = new MessageBox({
    data: options
  }).$mount()

  document.body.appendChild(instance.$el)

  Vue.nextTick(() => {
    instance.visible = true
  })
}

export default Message

main.js中：

// 在main.js里面全局引入 自定义的全局消息框组件
import Message from './components/message'
Vue.prototype.$my_message = Message.install

页面中调用：

this.$my_message('你这个大笨猪吼吼吼！');
this.$my_message('你这个大笨猪吼吼吼！','success');

this.$my_message({

    content:'服务器连接失败！',    // 弹出的文字内容
    time:5000,                 // 弹出后多久消失
    type:'success',          // 弹出的消息类型
    hasClose:true,         // 让按钮可以被使用，默认按钮是false不可以使用的

});

4.注意事项

本Demo中弹出的提示语句中的小图标是iconfont里面的。

具体使用的步骤可以看：https://www.jianshu.com/p/e7329afafb4b