全局模态框组件的实现

功能：
1、未登录，会弹出图一的提示框
2、加入购物车成功，弹出图二提示框
效果：

子组件中，创建src/components/Modal.vue模态框组件，用于提示框

<template>
  <div>
    <div class="md-modal modal-msg md-modal-transition" v-bind:class="{'md-show':mdShow}">
      <div class="md-modal-inner">
        <div class="md-top">
          <button class="md-close" @click="closeModal">Close</button>
        </div>
        <div class="md-content">
          <div class="confirm-tips">
            <slot name="message"></slot>   // 定义一个消息插槽
          </div>
          <div class="btn-wrap">
            <slot name="btnGroup"></slot>  // 定义一个按钮插槽
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-if="mdShow" @click="closeModal"></div>
  </div>
</template>

<script>
    export default {
        props:["mdShow"],
        data(){
          return{
          }
        },
      methods:{
        closeModal(){
          this.$emit("close");  // 触发主组件close事件
        }
      }
    }
</script>

主组件GoodsList.vue中插入子组件

<template>
     <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">
        请先登陆，否则无法加入到购物车中
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" @click="closeModal">关闭</a>
      </div>
    </modal>
    <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="closeModal">继续购物</a>
        <router-link to="/cart" class="btn btn--m" href="javascript:;" >查看购物车</router-link>
      </div>
    </modal>
</template>
<script>
    import Modal from '@/components/Modal.vue'
    export default {
      data(){
        return{
          mdShow:false,
          mdShowCart:false
      }    
      methods:{
          addCart(productId){
          axios.post("/goods/addCart",{
            productId:productId
          }).then(res=>{
            if(res.data.status==0){
              // alert("加入成功");
              this.mdShowCart=true;
            }else{
              // alert("msg:"+res.data.msg);
              this.mdShow=true;
            }
          })
        },
        closeModal(){
          this.mdShow=false;
          this.mdShowCart=false;
        }
      }
</script>