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>