全局模态框组件实现

Posted 2021-03-23 psxiao

一、项目目录如下：

 

 二、向model组封装一个模态框：Modal.vue

<template>
    <div>
        <!-- 定义全局模态框 -->
        <div class="md-modal modal-msg md-modal-transition md-show" 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>
<style>

</style>
<script>
export default ({
    props:["mdShow"],
    data(){
        return{

        }
    },
    methods:{
        closeModal(){
            //触发父组件的close事件
            this.$emit("close"); 
        }
    }
})
</script>

GoodsList.vue

 <modal v-bind:mdShow="mdShow" v-on:close="closeModal" >
        <p slot="message">
          请先登录，否则无法加入到购物车中！
        </p>
        <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:;"  @click="mdShow = false">关闭</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="mdShowCart = false">继续购物</a>
          <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
        </div>
      </modal>

关于父子通信问题，可以查看：https://www.cnblogs.com/sichaoyun/p/6690322.html