vue封装一个弹框组件

这是一个提示框和对话框，例：

 

这是一个组件 eject.vue

<template>
  <div class='kz-cont' v-show='showstate'>
    <div class='kz-wrapper' >
      <div class='kz-text'>
        <strong><slot name='text' ></slot></strong>
      </div>
      <div class='footer'>
        <div @click='tocancel' class='kz-btn'>取消</div>
        <div class='kz-btn' @click='took'>确定</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'eject',
    props:['type','showstate'],
    methods:{
      tocancel:function(){
        this.$emit('tocancel');
      },
      took:function(){
        this.$emit('took');
      }
    }
  }
</script>
<style scoped>
  .kz-cont{position:fixed;left:0;right: 0;top:0;bottom: 0;z-index: 500;background:rgba(0,0,0,0.3);text-align:center;overflow: hidden;white-space:nowrap;}
  .kz-cont:after{content:"";display:inline-block;width:0;height:100%;visibility: hidden;vertical-align:middle;}
  .kz-wrapper{display:inline-block;vertical-align:middle;background:#fff;color:#333333;border-radius: 5px;max-width:100%;}
  .kz-text{text-align:center;padding:20px 75px;}
  .footer{display:flex;border-top:1px solid #E5E5E5;color:#488BF1;}
  .kz-btn{flex:1;padding: 12px;}
  .kz-btn +.kz-btn{border-left:1px solid #E5E5E5;}
</style>

在子组件调用使用

<script>
  import Eject from './eject'
  export default{
    name:'demo',
    components:{
      Eject
    },
    data(){
      return {
        showa:false,
        showc:false,
        msg:""
      }
    },
    methods:{
      alerts(){
        this.showa=true;
      },
      confirms(){
        this.showc=true;
        this.msg="这是一个对话的弹窗";
      },
      okfall(){
        this.showa=false;
      },
      cancelfall(){
        this.showc=false;
      },
      okfall2(){
        this.showc=false;
      }
    }
  }
</script>

html代码

<template>
    <div class='zk-box'>
      <div class='zk-flex zk-pd'>
        <div class='zk-btn' @click='alerts'>提示框</div>
        <Eject  type='alert' @took='okfall' :showstate='showa'>
          <span slot='tlt'>提示</span>
          <div slot='text'>这是一个提示弹窗</div>
        </Eject>
      </div>
      <div class='zk-flex zk-pd'>
        <div class='zk-btn zk-blue' @click='confirms'>对话框</div>
        <Eject  type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
          <span slot='tlt'>确认</span>
          <div slot='text'>{{msg}}</div>
        </Eject>
      </div>
    </div>
</template>

整体代码

<template>
    <div class='zk-box'>
      <div class='zk-flex zk-pd'>
        <div class='zk-btn' @click='alerts'>提示框</div>
        <Eject  type='alert' @took='okfall' :showstate='showa'>
          <span slot='tlt'>提示</span>
          <div slot='text'>这是一个提示弹窗</div>
        </Eject>
      </div>
      <div class='zk-flex zk-pd'>
        <div class='zk-btn zk-blue' @click='confirms'>对话框</div>
        <Eject  type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
          <span slot='tlt'>确认</span>
          <div slot='text'>{{msg}}</div>
        </Eject>
      </div>
    </div>
</template>
<script>
  import Eject from './eject'
  export default{
    name:'demo',
    components:{
      Eject
    },
    data(){
      return {
        showa:false,
        showc:false,
        msg:""
      }
    },
    methods:{
      alerts(){
        this.showa=true;
      },
      confirms(){
        this.showc=true;
        this.msg="这是一个对话的弹窗";
      },
      okfall(){
        this.showa=false;
      },
      cancelfall(){
        this.showc=false;
      },
      okfall2(){
        this.showc=false;
      }
    }
  }
</script>
<style>
  .zk-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:4.5rem 0;}
  .zk-flex{flex:1;}
  .zk-pd{padding:0.5rem 0.1rem;}
  .zk-btn{display:block;line-height:0.88rem;text-align:Center;color:#fff;border-radius: 0.12rem;background:#488BF1 ;}
  .zk-blue{background:#488BF1;}
</style>

这就是封装好了的组件和使用方法，哪里需要弹窗直接调用就可以了