vue弹窗组件的实现示例代码

.md-btn{flex:1;}
.md-btn +.md-btn{border-left:0.01rem solid #E5E5E5;}
</style>

组件中模版代码很简单，其中主要的就是两个具名插槽slot；两个按钮触发两个事件，这两个事件通过$emit上传到父组件。根据父组件传递过来的type属性来决定是否显示取消按钮。

对于具名插槽和$emit事件系统不理解的可以去vue官网查看，这里不多做赘述了。

vue弹窗组件的使用

在父组件里面使用弹窗组件也是很方便的，如果你是bootstrap的使用者或者爱好者，你会对这种使用方式感到熟悉和亲切。

下面我展示使用代码：

<template>
<div>
  <div class='aft-box'>
      <div class='aft-flex aft-pd'>
        <div class='aft-btn' @click='alerts'>alert</div>
      </div>
      <div class='aft-flex aft-pd'>
        <div class='aft-btn aft-blue' @click='confirms'>confirm</div>
      </div>
  </div>
  <Modal type='alert' @took='okfall' :showstate='showa'>
      <span slot='tlt'>提示</span>
      <div slot='text'>我是一个alert提示弹窗</div>
  </Modal>
  <Modal type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
      <span slot='tlt'>确认</span>
      <div slot='text'>{{msg}}</div>
  </Modal>
</div>
</template>
<script>
import Modal from './modal'
export default{
  name:'container',
  components:{
    Modal
  },
  data(){
    return {
      showa:false,
      showc:false,
      msg:"我有两个按钮，是confirm确认弹窗"
    }
  },
  methods:{
    alerts(){
      this.showa=true;
    },
    confirms(){
      this.showc=true;
      this.msg="我有两个按钮，是confirm确认弹窗";
    },
    okfall(){
      this.showa=false;
    },
    okfall2(){
      this.msg="点击了确认按钮，2秒后弹窗关闭";
      setTimeout(()=>{
        this.showc=false;
      },2000);
    },
    cancelfall(){
      this.showc=false;
    }
  }
}
</script>
<style>
.aft-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:0.5rem 0;}
.aft-flex{flex:1;}
.aft-pd{padding:0.5rem 0.1rem;}
.aft-btn{display:block;line-height:0.88rem;text-align:Center;
  color:#fff;border-radius: 0.12rem;background:#FFB63B ;}
.aft-blue{background:#488BF1;}
</style>

这里我们需要先通过import引入modal弹窗组件，再在父组件里面通过components属性声明使用此组件。

然后在template模版中通过Modal标签使用弹窗组件；