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>

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

这是一个提示框和对话框，例：　　　　　
这是一个组件 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>12345678910111213141516171819202122232425262728293031323334353637在子组件调用使用<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>12345678910111213141516171819202122232425262728293031323334html代码<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>123456789101112131415161718整体代码<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>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960这就是封装好了的组件和使用方法，哪里需要弹窗直接调用就可以了————————————————版权声明：本文为CSDN博主「zeke_x」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_41997724/article/details/82687005