vue弹窗组件的样子
我们先看一下，我们要实现出来的弹窗组件长什么样子：
呐，我们要用vue组件实现的弹窗就是这个样子，跟我们用js插件实现的效果一样，下面我们开始讲述怎么实现一个通用的vue弹窗组件。
实现vue弹窗组件需要的知识
是vue组件，当然最基础的是vue的知识，我假设大家是有一定vue功底的，然后你还需要了解：
1、vue的事件系统，vue组件间的单项数据流，props从父组件向子组件传递数据，子组件通过事件emit向父组件传递事件，父组件通过on监听子组件的事件来处理具体事务。
2、具名插槽slot，通过name属性来接收不同的父组件传递过来的内容，具名插槽接收两个数据，一是弹窗的标题，二是弹窗的显示内容。
vue弹窗组件的实现代码
vue弹窗的具体实现代码采用单页面组件的形式写的，具体代码如下：
<template>
<div class='md-cont' v-show='showstate'>
<div class='md-wrapper' >
<div class='md-title'>
<slot name='tlt' >
标题
</slot>
</div>
<div class='md-text'>
<slot name='text' >
这里是弹框内容
</slot>
</div>
<div class='footer'>
<div v-if='type=="confirm"' @click='tocancel' class='md-btn'>取消</div>
<div class='md-btn' @click='took'>确定</div>
</div>
</div>
</div>
</template>
<script>
export default{
name:'modal',
props:['type','showstate'],
methods:{
tocancel:function(){
this.$emit('tocancel');
},
took:function(){
this.$emit('took');
}
}
}
</script>
<style scoped>
.md-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;}
.md-cont:after{content:"";display:inline-block;width:0;
height:100%;visibility: hidden;vertical-align:middle;}
.md-wrapper{display:inline-block;vertical-align:middle;
background:#fff;color:#333333;font-size:0.34rem;
padding-top:0.2rem;border-radius: 0.1rem;max-width:100%;}
.md-title{font-size:0.34rem;text-align:center;line-height:0.6rem;}
.md-text{font-size:0.25rem;text-align:center;line-height:0.4rem;padding:0.2rem 0.5rem;}
.footer{display:flex;border-top:0.01rem solid #E5E5E5;
line-height:0.88rem;color:#488BF1;font-size:0.32rem;}
