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