DialogQueue

自从入职新公司一来，一直在做给app拉新的活动，最近接到一个活动，一进首页时会连续弹多个弹框提示用户获得的奖励或者完成的任务。现在将连续弹框的逻辑抽离出来，写了DialogQueue组件(该组建更多的是作为一个连续弹框的解决方案)。

Live Demo

use

npm install dialog-queue

<dialog-queue  @closeDialog="closeDialog('show')" v-if=show>
        <div class="test-dialog">
            test dialog
        </div>
</dialog-queue>
<div v-if=show1>
    <dialog-queue  @closeDialog="closeDialog('show1')">
            <div class="test-dialog">
                test dialog1
            </div>
    </dialog-queue>
</div>
<div v-if=show2>
    <dialog-queue  @closeDialog="closeDialog('show2')">
            <div class="test-dialog">
                test dialog2
            </div>
    </dialog-queue>
</div>
<dialog-test v-if=show3 @closeTestDialog="closeDialog('show3')">
    test dialog3
</dialog-test>
<dialog-test v-if=show4 @closeTestDialog="closeDialog('show4')">
    test dialog4
</dialog-test>
<button class="button" @click="show = true">开启弹窗</button>
<button class="button" @click="show1 = show2 = show3 = show4 = true">连续弹窗</button>
<script>
  import DialogQueue from '../src/DialogQueue.vue';
  import DialogTest from './components/DialogTest.vue'
  export default {
    data () {
      return {
        show: false,
        show1: false,
        show2: false,
        show3: false,
        show4: false
      }
    },
    components: {
        DialogQueue,
        DialogTest
    },
    methods: {
        closeDialog(arg) {
            this[arg] = false;
        }
    }
  }
</script>
<style lang="stylus">
    .test-dialog
        width 200px
        line-height 400px
        text-align center
        background antiquewhite
        animation-name dialogIn
        animation-duration .5s
        animation-fill-mode forwards
    @keyframes dialogIn
        0%
            transform scale(0, 0)
        50%
            transform scale(1.1, 1.1)
        75%
            transform scale(0.95, 0.95)
        100%
            transform scale(1, 1)

</style>

DialogQueue Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------- |-------- | | showMask | 是否显示弹框背景蒙层 | boolean | - | true | | backgroundBottom | 蒙层底部背景样式 | string | - | rgba(28, 2, 2, 0.8) | | backgroundTop | 蒙层顶部背景样式 | string | - | rgba(28, 2, 2, 0.1) | | showCloseBtn | 是否显示弹框关闭按钮 | boolean | - | true | | disableMaskClick | 点击蒙层是否关闭弹框 | boolean | - | false |

Events

| 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | closeDialog | 点击关闭按钮或者蒙层时触发的事件 | events |