# wil-vue-dialog

> 通用vue弹窗组件

Latest version **1.0.0** (published 2023-09-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install wil-vue-dialog
pnpm add wil-vue-dialog
yarn add wil-vue-dialog
bun add wil-vue-dialog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-09-04 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ncushujian |
| Maintainers | ncushujian |

## Links

- npm: https://www.npmjs.com/package/wil-vue-dialog
- npm.io page: https://npm.io/package/wil-vue-dialog

## Recent versions

- 1.0.0 (latest) — 2023-09-04

## README

# wil-vue-dialog
> 通用vue弹窗组件

**[Demo示例]()**       
**[前往Gitee](https://gitee.com/ncushujian/wil-web-modules/tree/master/vue-dialog)**

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

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

## 安装
```javascript
npm install wil-vue-dialog
```

## 基本用法

### 使用方式(template渲染)

```Vue
<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调用)
```Vue
<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等**

```javascript
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**

```javascript
{
  // 模态
  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**

```javascript
{
  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 | 否         | 无     | 一般为页面路由名称 |

#### 使用示例

```javascript
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  | 无   | 弹窗关闭后被调用 |

### 示例

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

---
_Source: https://npm.io/package/wil-vue-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._