vue 公用组件开发 消息提示$message

 

文件目录：

 

github地址：https://github.com/xingkongwuyu/vue-spa-experience/tree/master/src/components/message

最终的效果：

 这里的样式颜色啥的写的比较草率了，图标也选的比较草率，我需要一个ui设计师，没有的话我只能随便打打颜色了

 组件的源码解析：

message：  message的框架

./index.js

 

import messageBox from './src/index';
export default {
    install(Vue) {
      Vue.prototype.$message = messageBox;
    },
  };

使用transition来实现动画效果

<template>
  <transition name="mei-message-fade">
    <div v-if="show" :class="[
        'mei-message',
        type? `mei-message-${ type }` : '']"
      >
      <i v-if="type=='error'" class="mei-message-icon">
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1515656768815" 
      style="" viewBox="0 0 1024 1024" version="1.1" p-/></svg>
      </i>
      <i v-if="type=='success'" class="mei-message-icon">
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1515656188050"
       style="" viewBox="0 0 1024 1024" version="1.1" p-/></svg>
      </i>
      <span class="mei-message-con">{{text}}</span>
    </div>
  </transition>
</template>

<script type="text/babel">
  const typeMap = {
    success: 'success',
    info: 'info',
    warning: 'warning',
    error: 'error',
  
  };
  export default {
    data() {
      return {
        show:false,
        text:'',
        type:''
      };
    },
    computed: {
      iconClass() {
        return this.type
          ? `mei-message-icon mei-icon-${typeMap[this.type] }`
          : '';
      }
    },
  };
</script>
<style lang="scss" rel="stylesheet/scss" >
   .mei-message{
          position: fixed;
          min-width: 380px;
          border-radius: 4px;
          position: fixed;
          left: 50%;
          top: 20px;
          height:40px;
          transform: translateX(-50%);
          background-color: #edf2fc;
          transition: opacity .3s,transform .4s;
          overflow: hidden;
          padding: 15px 15px 15px 20px;
          background-color:#ccc;
          color:#000;
         
    }
    .mei-message-success{
        background-color:rgb(87, 161, 87); 
        color:#fff;
    }
    .mei-message-error{
        background-color:#ff5000; 
        color:#fff;
    }
    .mei-message-warning{
        background-color:#ccc; 
    }
    .mei-message-icon{
      display:inline-block;
      width:40px;
      height:40px;
      float:left;
    }
    .mei-message-con{
      line-height:40px;
      height:40px;
      display:inline-block;
      margin-left:10px;
    }
.mei-message-fade-enter-active {
  transition: all 0.3s linear;
}
.mei-message-fade-leave-active {
  transition: all 0.3s linear;
}
.mei-message-fade-enter, .mei-message-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>

 

 ./src/index.js

import Vue from 'vue';
import messageVue from './message.vue';
const defaults = {
    show:false,
    text:'',
    duration:'3000',
    type:''
};
const messageVueConstructor = Vue.extend(messageVue);
messageVueConstructor.prototype.close = function() {
  var vm=this;
  this.$on('after-leave', _ => {
    if (vm.$el && vm.$el.parentNode) {
      vm.$el.parentNode.removeChild(vm.$el);
    }
    this.$destroy();
  });
    vm.show = false;

};
const messageBox = (options = {}) => {
    if (Vue.prototype.$isServer) return;
    options = Object.assign({}, defaults, options);
    let parent = document.body ;
    let instance = new messageVueConstructor({
      el: document.createElement('div'),
      data: options
    });
    parent.appendChild(instance.$el);
    Vue.nextTick(() => {
      instance.show = true;
      setTimeout(function(){
        instance.close();
      },options.duration)
    });

   
    return instance;
  };
  
  export default messageBox;

 

引入全局 使用：

import VueMessage from './components/message'

Vue.use(VueMessage)

 message () {
         this.$message({
          type:'success',
          text:11111,
        });
},

             配置项：

      type：类型【success，error，info，warning】

      button：按钮
      text：内容

      duration:时间

      这里type类型你们可以去找找好看的我就是随便乱弄了下   iconfont 另外我就找了success和error的icon比较草率；