# portable-dialog-v3

> portable-dialog-v3是为了解决页面在使用弹窗时，维护弹窗数据及状态的代码可以单独抽离出来封装，防止页面弹窗过多时，代码维护困难。

Latest version **0.0.1-beta.3** (published 2023-02-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install portable-dialog-v3
pnpm add portable-dialog-v3
yarn add portable-dialog-v3
bun add portable-dialog-v3
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-beta.3 |
| Published | 2023-02-03 |
| First published | 2023-02-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | weijiagc |
| Keywords | dialog, vue-dialog, create-dialog, open-dialog, custom-dialog, show-dialog |

## Links

- npm: https://www.npmjs.com/package/portable-dialog-v3
- npm.io page: https://npm.io/package/portable-dialog-v3

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.0.1-beta.3 (latest) — 2023-02-03
- 0.0.1-beta.2 — 2023-02-02
- 0.0.1-beta.1 — 2023-02-02
- 0.0.1-alpha.2 — 2023-02-01

## README

## 说明
portable-dialog-v3是为了解决页面在使用弹窗时，维护弹窗数据及状态的代码可以单独抽离出来封装，防止页面弹窗过多时，代码维护困难。
如果是vue2版本请安装 <a href="https://www.npmjs.com/package/portable-dialog">portable-dialog</a>。
## 安装
```shell
npm install portable-dialog-v3
```

## 引入
``` javascript
// 在需要使用弹窗的地方直接引入创建弹窗方法
import OpenDialog from 'portable-dialog-v3'
```
## 使用案例
``` javascript
// Test.vue
<template>
    <div>
        <button @click="handleClick">点击弹窗</button>
    </div>
</template>
<script lang="ts" setup>
import OpenDialog from 'portable-dialog-v3';

import FormView from './FormView.vue';
const handleClick = () => {
    // 以弹窗方式打开用户定义的Form组件
      // OpenDialog可传入三个参数
      // 第一个参数是自定义的弹窗组件
      // 第二个参数是需要传入给自定义弹窗组件的数据
      // 第三个参数是一个配置对象，可以定义回调方法，okCallback，cancelCallback
      // 其中okCallback会传递用户调用自定义事件时传入的参数，供用户提交使用，同时如果该方法返回true会关闭弹窗，否则弹窗不会关闭
    OpenDialog(FormView, { name: 'zhangsan', age: 19 }, {
        okCallback:  (data = {}) => {
            // 拿到Form组件传递过来的数据，可用于后续校验提交等
            console.log('data', data)
            return true
        },
        cancelCallback() {
            // 弹窗关闭时的触发
            console.log('cancel')
            return true;
        },
        title: '弹窗',  // 设置弹窗标题，仅在hiddenHeader为false有效
        // top: '600px', // 设置弹窗和窗口的距离
        // closeAnimation: true,
        // hiddenHeader: true,// 设置隐藏弹窗头部（需要自定义头部展示样式时使用）
        // hiddenZoomIcon: true, // 设置隐藏缩放图标，仅在hiddenHeader为false有效
        // hiddenCloseIcon: true, // 设置隐藏关闭图标，仅在hiddenHeader为false有效
        // fullScreen: true // 设置弹窗是否为全屏展示
    })

}
</script>



<style scoped>

</style>
```
``` javascript
// Form.vue
<template>
    <div class="dialog">
        {{ props.name }}---{{ props.age }}
        <br/>
        <button @click="handleClick">确定</button>
    </div>
</template>
<script lang="ts" setup>
  // 接收传入的数据
const props = defineProps({
    name: {
        type: String,
        default: "",
    },
    age: {
        type: Number,
        default: 0,
    },
});
const emit = defineEmits(["ok"]);
const handleClick = () => {
     // 调用弹窗确定事件，其中第二个之后的参数会定义的okCallback回调中接收
    emit('ok', { name: 'lisi' })

}
</script>
<style scoped>
.dialog {
    width: 180px;
    height: 100px;
    padding: 20px;
}
</style>
```

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