基于vue的动态modal，很好用的弹窗工具，移动端必备

今天我们来介绍基于vue开发的modal， 这是我在东家波奇网开发的一个小组件，叫boqii-modal.
由于同事们在做H5的活动的时候，很多次的用到来modal框弹层像这样的

屏幕快照 2018-12-17 上午11.27.10.png

屏幕快照 2018-12-17 上午11.27.20.png

屏幕快照 2018-12-17 上午11.27.32.png

基于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*/