vue弹窗组件的样子
我们先看一下，我们要实现出来的弹窗组件长什么样子：
呐，我们要用vue组件实现的弹窗就是这个样子，跟我们用js插件实现的效果一样，下面我们开始讲述怎么实现一个通用的vue弹窗组件。
实现vue弹窗组件需要的知识
是vue组件，当然最基础的是vue的知识，我假设大家是有一定vue功底的，然后你还需要了解：
1、vue的事件系统，vue组件间的单项数据流，props从父组件向子组件传递数据，子组件通过事件emit向父组件传递事件，父组件通过on监听子组件的事件来处理具体事务。
2、具名插槽slot，通过name属性来接收不同的父组件传递过来的内容，具名插槽接收两个数据，一是弹窗的标题，二是弹窗的显示内容。
vue弹窗组件的实现代码
vue弹窗的具体实现代码采用单页面组件的形式写的，具体代码如下：
<template> <div v-show='showstate'> <div > <div> <slot > 标题 </slot> </div> <div> <slot > 这里是弹框内容 </slot> </div> <div> <div v-if='type=="confirm"' @click='tocancel'>取消</div> <div @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;} .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> <div> <div @click='alerts'>alert</div> </div> <div> <div @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标签使用弹窗组件；
在弹窗组件上通过type来设置弹窗的特性；
通过:showstate属性来标识弹窗的打开和关闭；
通过@took来设置确定按钮点击后的操作；
通过@tocancel来确定取消按钮点击后的操作;