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()">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)
          }
    }
}