# jdc-popup

> a simple vue popup component

Latest version **1.0.4** (published 2020-04-29) · MIT license · 2 weekly downloads

## Install

```sh
npm install jdc-popup
pnpm add jdc-popup
yarn add jdc-popup
bun add jdc-popup
```

## 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.4 |
| Published | 2020-04-29 |
| First published | 2019-12-22 |
| Weekly downloads | 2 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 422.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | caijieying |
| Maintainers | jinglecjy |
| Keywords | vue component, popup |

## Links

- npm: https://www.npmjs.com/package/jdc-popup
- Repository: https://github.com/winniecjy/jdc-popup
- Homepage: https://github.com/winniecjy/jdc-popup#readme
- Issues: https://github.com/winniecjy/jdc-popup/issues
- npm.io page: https://npm.io/package/jdc-popup

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.11

## 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.0.4 (latest) — 2020-04-29
- 1.0.3 — 2020-04-29
- 1.0.2 — 2019-12-22
- 1.0.1 — 2019-12-22
- 1.0.0 — 2019-12-22

## README

# jdc-popup

> vue 版本：vue2.1.8+

封装的弹窗组件，目前实现功能：

- [x] 解决滑动穿透（背景滚动）问题
- [x] 新弹窗永远在旧弹窗之上
- [x] 出现/消失过渡动画

## demo 体验地址

https://winniecjy.github.io/jdc-popup/demo/  
![demo地址](https://img12.360buyimg.com/imagetools/s200x200_jfs/t1/68885/4/15183/22208/5dcab88aEa322abec/636120af710f2c55.png)

## 安装

```javascript
npm install jdc-popup -S
```

## 快速使用

```html
import Popup from 'jdc-popup'

<!-- 对于内部需要滚动的元素，需要添加类名jdc-popup-scroll -->
<Popup :show="showPopup" tween="bottom">
  <div class="popup jdc-popup-scroll">
    <p v-for="index of 100">弹窗内容{{index}}</p>
  </div>
</Popup>
```

## 参数说明

| 参数       | 描述         | 可选值                                                                                                                              | 默认值         |
| ---------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| show       | 是否显示弹窗 | true \| false                                                                                                                       | false          |
| lockScroll | 禁止背景滚动 | true \| false                                                                                                                       | true           |
| maskColor  | 蒙层颜色     | string                                                                                                                              | rgba(0,0,0,.3) |
| tween      | 弹窗过渡动画 | fade：淡入淡出<br/>flop：翻牌<br/>scale：缩放<br/>bottom：从下方出现<br/>top：从上方出现<br/>left：从左侧出现<br/>right：从右侧出现 | 无过渡         |

## 兼容性

- PC
- Android 4.4+
- iOS 8+

## 版本信息

- 1.0.0
  - [x] 解决滑动穿透（背景滚动）问题
  - [x] 新弹窗永远在旧弹窗之上
  - [x] 出现/消失过渡动画

## FIXING ...

## FIXING ...

- [x] ANDROID 下边界滚动
- [x] 多弹层是只有顶部的元素是可滚动的，避免穿透到下层
- [x] ios8 下弹层无法滚动

有任何问题欢迎 issue~

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