vue-cli中封装一个弹框组件
vue-cli中封装一个移动端的弹出层组件这是一个提示框和对话框,例: 这是一个组件 eject.vue<template><div class='kz-cont' v-show='showstate'>&l
·
vue-cli中封装一个移动端的弹出层组件
这是一个提示框和对话框,例:
这是一个组件 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>
这就是封装好了的组件和使用方法,哪里需要弹窗直接调用就可以了
更多推荐
已为社区贡献13条内容
所有评论(0)