vue封装共用组件-confirm

先上源码:

<template>
    <transition name="mask-bg-fade">
        <!-- 弹框组件 --> 
        <div class="mask" v-show="show">
            <div class="mask_bg"></div>
            <transition name="slide-fade">
                <div class="modelBox" v-show="show">
                    <div class="title">
                        <p>{{confirmModalOptions.title}}</p>
                        <i class="icon" v-on:click="closeModel()">&#xe611;</i></div>
                    <div class="message">
                        <span v-for='(item,index) in confirmModalOptions.message' :key='index'>{{item}}</span>
                    </div>
                    <div class="model_btnBox" v-show='confirmModalOptions.btnCancelText != null'>
                        <button v-on:click="confirmCancel()">
                            {{confirmModalOptions.btnCancelText}}
                        </button>
                        <button v-on:click="confirmSubmit()">
                            {{confirmModalOptions.btnSubmitText}}
                        </button>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>
<script>
export default {
    name:'confirm',
    props: ["confirmModalOptions"],
    data() {
      return {
        show: false,   // 是否显示模态框
      }
    },
    methods: {
        closeModel() {
            this.show = false;
        },
        showModel() {
            this.show = true;
        },
        confirmCancel() {
            this.show = false;
            if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){
                this.confirmModalOptions.btnCancelFunction()
            }
        },
        confirmSubmit() {
            this.show = false;
            if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
                this.confirmModalOptions.btnSubmitFunction()
            }
        }
    }
}
</script>
<style scoped lang='scss'>
.mask{
    .modelBox{ width: 6rem; height: 4rem;margin: auto;background-color: white;position: relative;top: calc(22%);border-radius: .1rem;
    }
    .title{padding: .1rem;text-align: center;background-color: #F7F8FA;border-top-left-radius: .1rem;border-top-right-radius: .1rem;display: flex;justify-content: center;
        p{flex: 1;color: #666;}
    }
    .message{
        padding: .2rem;height: 2.6rem;
        span{display: inline-block;padding: .1rem;background-color: #24D08E;width: 1.2rem;margin: .1rem;color: white;text-align: center;border-radius: .1rem;
}
    }
    .model_btnBox{
        text-align: center;
        button{ padding: .1rem .6rem;border: none;color: white;border-radius: .1rem;    margin: 0 .5rem;
            &:nth-child(2){ background-color: #24D08E;
            }
        }
    }
}
</style>

1.整个组件之间的通信是通过 props ，可以是对象可以是数组或者是函数
2.在需要的该组件的页面使用 import DConfirm from ‘../components/confirm.vue’;引入该组件并注册组件；

并且通过 v-bind指令绑定数据
3.在引入的页面采用如下方法：

function abc(){
    this.$refs.myConfirm.showModel();
    this.confirmOptions= {
        type: "warning",
        title: "缺考学生",//提示
        message:this.locklist,
         btnCancelText:'关闭',
         btnSubmitText:'提交',
          btnCancelFunction:function(){
              console.log(333)
          },
          btnSubmitFunction:function(){
              console.log(1111)
          }
    }
}