mpvue小程序动态弹窗组件、遮罩层组件、实现点击屏蔽、拿走即用

先上效果图吧

这里用到两个组件，mask遮罩和activeModel组件

• mask属性

属性名	描述
top	控制遮罩层距离顶部的距离
noclickhide	是否屏蔽点击事件（boolean）

• mask事件

事件名	描述
onHideHander，onShowHander	控制遮罩层上弹框的进场、退场过渡动画
hideMask	控制遮罩层隐藏
showMask	控制遮罩层显示

• activeModel属性

属性名	描述
showActive	控制弹框的动画
aheight	控制弹框高度

使用

先把组件下载下来：https://github.com/Emmpty/activeModel，放进你的项目里。

<template>
  <div>
    <mask
      ref="testMask"
      top="0"
      :noclickhide='false'
      @onHideHander="onHideTestMask()"
      @onShowHander="onShowTestMask()"
    >
      <activeModel
        :showActive="showActive"
      >
        <div>
        	 <!-- 这里自定义所需的弹框内容-->
        </div>   
      </activeModel>
    </mask>
    <button @click="showTestMask()">立即体验</button>
  </div>
</template>

<script>
import mask from '@/components/mask'  //这里等同于 'src/components/mask'
import activeModel from '@/components/activeModel'

export default {
  data () {
    return {
      showActive: false
    }
  },
  methods: {
  	showTestMask(){
  	  // 使用ref来调用组件里的方法，testMask需和上面mask组件中ref值一样
  	  this.$refs.testMask.showMask()
  	},
    onHideTestMask() {
      this.showActive = false
    },
    onShowTestMask() {
      let _this = this
      setTimeout(() => {
        _this.showActive = true
      }, 100)
    },
  },
  // 切记要在这里声明引入组件
  components: {
    mask, activeModel
  },
}
</script>