今天我们来介绍基于vue开发的modal, 这是我在东家波奇网开发的一个小组件,叫boqii-modal.
由于同事们在做H5的活动的时候,很多次的用到来modal框弹层像这样的
基于vue的开发模式,写一个弹层其实挺麻烦的。
所以我写来一个vue的实例拓展来使开发者能够更加优雅的使用弹窗
github地址: boqii-modal
npm 包地址: npm install boqii-modal
使用方法
import 'boqii-modal'
import AComponent from '@/component/AComponent'
let propsdata = []
this.$modal({
template: AComponent, //你要弹出的业务组件
params: propsdata, //你要传入模态框的参数
enter: 'slideInUp', //莫太框进入时的动画,不需要动画时填 none
leave: 'slideOutDown', //莫太框离开时的动画,不需要动画时填 none
success:function(data){
console.log(" success callback data", data)
//this.emit('hide') //隐藏当前莫太框
//this.emit('show') //显示当前莫太框
},
fail: function(err){
console.log(" failed callback err", err)
},
duration: 700, //默认700ms, 动画执行的过渡时间
backScroll: false, //默认为false, 莫太框展开时是否让背面滚动, true为滚动
backdropClickable: true, //默认为false, 灰色背景是否可以点击
backdropColor: 'transparent' //蒙层背景颜色,不填默认是rgba(0, 0, 0, 0.7)
})
参数说明
this.modal(options)
options 是一个对象,参数说明
template: 你自己自定义的组件
params: 你要穿入组件的参数,在你的组件中,props:['params'] 就能接收到你的参数
enter: 'slideInUp' 莫太框进入时的动画效果,当然,需要自己写动画css,或者直接引入animate.css
leave: 莫太框离开时的动画,不需要时填'none'
success:function(data){} //莫太框给的回调函数
fail: function(err){} //莫太框给的失败的回调函数
duration: 动画的间隔时间
backScroll: true代表背景可以滚动,false标示背景不能滚动
backdropClickable: true代表背景蒙层可以被点击,false不能被点击
backdropColor: 背景蒙层的颜色值
对于接收的组件demo
/*AComponent*/
<template>
<div class="com-demo" >
动态组件
接受到的参数--------
<div>{{params}}</div>
<span @click="close">关闭</span>
<div @click="clickModal">点击弹出第二个莫太框</div>
</div>
</template>
<script>
import demo2Component from './demo2Component';
export default {
name:'demo',
data(){
return{
test:'234'
}
},
props:['params'],
methods:{
close(){
this.$emit('close')
},
clickModal(){
let self = this;
this.$emit("hide")
this.$modal({
template: demo2Component,
duration: 0,
success:function(){
self.$emit("show");
}
})
}
},
mounted(){
console.log("params", this.params);
}
}
</script>
<style lang="scss" scoped>
.com-demo{
width: 3rem;
height:2rem;
background: #fff;
color:#000;
font-size:0.2rem;
}
</style>