wil-vue-dialog

通用vue弹窗组件

Demo示例
前往Gitee

1. 在组件内部使用template渲染，使用变量通过v-if控制显示和关闭
2. 使用api方式显示和关闭弹窗时，弹窗会直接挂载在body的直接子节点下，该节点与vue root节点同级

注意

1. 此组件的对document.body方法有依赖;
2. 打包时需对该组件转义

安装

npm install wil-vue-dialog

基本用法

使用方式(template渲染)

<template>
<div class="demo">
  <input type="button" value="打开">
  <Dialog v-if="shown" @afterLeave="onLeave" @tap="onOpen">
    <prize />
  </Dialog>
</div>
</template>
<script>
import { Dialog } from 'wil-vue-dialog';
import Prize from '@/components/Prize';
export default {
  name: 'Home',
  components: {
    Dialog,
    Prize
  },
  data: function () {
    return {
      shown: false
    }
  },
  methods: {
    onOpen () {
      this.shown = true;
    }
    onLeave () {
      this.shown = false;
    }
  }
}
</script>

使用方式(Api调用)

<template>
<div class="demo">
  <input type="button" value="打开" @tap="onOpen">
</div>
</template>
<script>
import DialogController from 'wil-vue-dialog';
import Prize from '@/components/Prize';
export default {
  name: 'Home',
  methods: {
    onOpen () {
      DialogController.syncShow({
        props: {
          withCloseBtn: false
        },
        component: Prize
        // 动态引入
        // component: () => import(/* webpackChunkName: "dialog" */'@/components/Prize')
      })
    }
  }
}
</script>

初始化

api调用方式下，建议统一按照此方法进行初始化，可保证弹窗可以获取所有全局属性，如：$store, $router等

new Vue({
    el: '#app',
    render: h => h(App),
    created () {
      DialogController.bind(this); // 绑定根组件为所有弹窗组件的父节点
    }
  }).$mount('#app');

API

基础常用

ayncShow 和 syncShow 会为传入的 component 组件注入三个Boolean props：entered、willLeave、leaved，可以通过watch这些props在打开和关闭过程中执行特定逻辑

asyncShow(option) 异步打开

返回值：instance（弹窗实例：由于是异步打开，传入参数中的弹窗可能在等待打开的队列中，返回的实例可能不是传入参数中弹窗的实例，而是当前打开的弹窗实例）

| 参数 | 类型 | 是否可缺省 | 默认值 | 说明 | | ------------------- | ---------------------- | ---------- | ------ | -------------------- | | option | Object | 否 | 无 | | | option.component | Constructor | Promise | 否 | 无 | 组件，支持动态import | | option.contentProps | Object | 是 | 无 | 传入的组件的props | | option.props | Object | 是 | 无 | Dialog的props | | option.events | Object | 是 | 无 | Dialog响应事件 |

option.props

{
  // 模态
  modal: {
    type: Boolean,
    default: false
  },
  // 是否显示关闭按钮
  withCloseBtn: {
    type: Boolean,
    default: true
  },
  // 关闭按钮位置
  closeBtnPos: {
    type: String,
    default: 'top'
  },
  // 动画类型，仅控制弹窗内容动画，背景动画默认都存在
  animation: {
    type: String,
    default: 'scale' // 有效值：scale；slide; none
  },
  // 是否展示黑色遮罩
  mask: {
    type: Boolean,
    default: true
  }
}

option.events

{
  afterEnter: () => {},
  afterLeave: () => {}
}

syncShow(option) 同步打开

返回值：instance（弹窗实例：传入参数中弹窗的实例）

参数同asyncShow

asyncShow与syncShow的差异

• asyncShow用在异步流程中的弹窗打开，一般用来避免某类弹窗同时弹出，保证某类弹窗按顺序依次弹出
• asynShow会被用队列管理起来，所有使用asyncShow打开的弹窗，同一时间只展示一个，关闭后会展示下一个
• syncShow更常用，只要调用就会展示，一直叠加

Promise closeAll() - 关闭所有

• 关闭所有API方式打开的弹窗
• 返回promise，可以等待动画结束后执行其他操作，也可不等待

高级

hideAllBy(key)

一般用来页面切换时，隐藏API方式打开的弹窗（在需要保留弹窗场景下才使用，否则，调用closeAll关闭所有即可），配合recoveryAllBy(key)使用

| 参数 | 类型 | 是否可缺省 | 默认值 | 说明 | | ---- | ------ | ---------- | ------ | ------------------ | | key | String | 否 | 无 | 一般为页面路由名称 |

recoveryAllBy(key)

一般用来页面切回时，恢复隐藏弹窗，配合hideAllBy(key)使用

| 参数 | 类型 | 是否可缺省 | 默认值 | 说明 | | ---- | ------ | ---------- | ------ | ------------------ | | key | String | 否 | 无 | 一般为页面路由名称 |

使用示例

router.beforeEach(function (to, from, next) {
  if (from && from.name) {
    DialogController.hideAllBy(from.name);
    next();
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  if (to && to.name) {
    DialogController.recoveryAllBy(to.name);
  }
});

弹窗实例

获取实例

• asyncShow和syncShow的返回值为弹窗实例
• 组件（传入api中的component参数）中可通过this.$parent拿到弹窗实例

Api

close(data) - 关闭弹窗

参数

| 参数 | 类型 | 是否可缺省 | 默认值 | 说明 | | ---- | ------ | ---------- | ------ | ---------------------------------------- | | data | Object | 是 | {} | 该值会传递到afterLeave和afterEnter钩子中 |

全局钩子

为所有弹窗打开和关闭增加钩子（template及API方式均支持）

| 名称 | 参数 | 说明 | | ------ | ---- | ---------------- | | before | 无 | 弹窗打开时被调用 | | after | 无 | 弹窗关闭后被调用 |

示例

import DialogController from 'wil-vue-dialog';
new Vue({
    el: '#app',
    render: h => h(App),
    created () {
      DialogController.before = function () {
        // do somthing
      };
    }
  }).$mount('#app');