# modalframe

> 基于vue的自定义模态框组件！

Latest version **1.2.0** (published 2019-07-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install modalframe
pnpm add modalframe
yarn add modalframe
bun add modalframe
```

## 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.2.0 |
| Published | 2019-07-29 |
| First published | 2019-07-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | hqy |
| Maintainers | lelkikyou |
| Keywords | modalFrame, vue, 模态框, 类似layer, Modal frame |

## Links

- npm: https://www.npmjs.com/package/modalframe
- Repository: https://github.com/LelKikyou/MyCodeAccumulation/tree/master/3%EF%BC%8Cvue/12.%E5%9F%BA%E4%BA%8Evue%E7%9A%84%E6%A8%A1%E6%80%81%E6%A1%86/modalFrame
- npm.io page: https://npm.io/package/modalframe

## 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

- 1.2.0 (latest) — 2019-07-29
- 1.1.0 — 2019-07-29
- 1.0.2 — 2019-07-22
- 1.0.1 — 2019-07-22
- 1.0.0 — 2019-07-22

## README

# 类似于layer的模态框，基于vue

```
  npm i modalFrame
  import modalFrame from "modalFrame";
  Vue.use(modalFrame);

  使用：
            import template from "./template"   //模态框里面的内容 自定义
            this.$modalFrame({
                        template: template,
                        className: ""，
                        modalData: {
                            name: "hqy"
                        },
                        width: "1000",
                        height: "500",
                        onCancel: function (vm) {
                            vm.remove()  //关闭弹窗的方法
                        },
                        onOk: function (vm) {

                        },
                        onClose: function (vm) {

                        }
                    })
```
## 可以传入的参数
```
            {
                className: "",// 传入的class,可以依靠这个class控制内部样式
                modalData: {},//传入模板里面的data
                width: "800",//宽度
                height: "600",//高度
                onCancel: "",//取消回调  返回vm
                onOk: "",//确认回调 返回 vm
                onClose: "",//关闭回调 返回 vm
                title: "",  //弹窗title
                btnShow: [true, true], //是否显示按钮，[true,false],可以控制按钮的显示隐藏 必须为数组
                btnTit: [],// 按钮的文字，["确认","关闭"]  必须为数组
            }
```

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