# @wefly/vue-popup

> A popup & toast component based on Vue 3.0

Latest version **1.0.6** (published 2021-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wefly/vue-popup
pnpm add @wefly/vue-popup
yarn add @wefly/vue-popup
bun add @wefly/vue-popup
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-05-08 |
| First published | 2021-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vitaminaq |
| Maintainers | vitaminaq |
| Keywords | vue, popup, toast, vue 3.0, ui |

## Links

- npm: https://www.npmjs.com/package/@wefly/vue-popup
- Homepage: https://github.com/Vitaminaq/plugins-vue/tree/master/vue-popup
- Issues: https://github.com/Vitaminaq/plugins-vue/tree/master/vue-popup/issues
- npm.io page: https://npm.io/package/@wefly/vue-popup

## Dependencies (1)

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

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2021-05-08
- 1.0.5 — 2021-05-06

## README

# vue-pupop-toast

### 用typescript写的一个基于vue3.0的pupop和toast库,包括confirm,alert,loading,toast等，欢迎广大网友补充，支持ts语法提示。  
A pupop and toast Library of Vue3.0 written with typescript, including confirm, alert, loading, toast, etc. welcome to add, support TS syntax prompt.

#### 安装/install
```bash
npm/cnpm install @wefly/vue-popup --save / yarn add @wefly/vue-popup
```

#### 使用/Use
``` javascript
// main.js or index.js or .ts
import '@wefly/vue-popup/dist/style.css';
import VuePupop from '@wefly/vue-popup';

Vue.use(VuePupop)
```

#### .vue
##### confirm 参数配置/ params
| key  | require |  default |  type | discribe |  
| :--: | :-----: | :----: | :---: | -------- |  
| message | 是 |        | string | 提示信息 |
| bgOpacity | 否 | 0.4 | number | 背景蒙层的透明度 |
| buttons | 否 | [{ text: '确定' }, { text: '取消' }] | string | 底部按钮数组 |
| callback | 否 | close() | function | 如果使用默认配置，给'确定'按钮绑定回调事件 |
  
example:  
``` javascript
async click() {
  const r = await this.$pupop.confirm({
    message: '确定删除此信息',
    buttons: [
      {
        text: '取消',
        callback: () => {
          return this.getAjaxMethod();
        }
      },
      {
        text: '删除',  // 按钮文案
        color: 'red', // 按钮颜色
        callback: () => {  // 点击按钮回调
          return this.getAjaxMethod();
        }
      }
    ]
  });
}
```
![confirm](https://raw.githubusercontent.com/Vitaminaq/vue-pupop-toast/master/picture/confirm.png)
##### alert 参数配置/ params
| key  | require |  default |  type | discribe |  
| :--: | :-----: | :----: | :---: | -------- |  
| message | 是 |        | string | 提示信息 |
| bgOpacity | 否 | 0.4 | number | 背景蒙层的透明度 |
| btnText | 否 | '确定' | string | 按钮文案 |
| btnColor | 否 | orange | string | 按钮文本颜色 |
| callback | 否 | close() | function | 按钮绑定回调事件 |
  
example:  
``` javascript
async click() {
  const r = await this.$pupop.alert({
    message: '点赞成功',
    btnText: '知道了',
    callback: () => {
      return this.getAjaxMethod();
    }
  });
}
```
![alert](https://raw.githubusercontent.com/Vitaminaq/vue-pupop-toast/master/picture/alert.png)
##### loading 参数配置/ params
| key  | require |  default |  type | discribe |  
| :--: | :-----: | :----: | :---: | -------- |  
| message | 是 |        | string | 提示信息 |
| bgOpacity | 否 | 0.4 | number | 背景蒙层的透明度 |
| icon | 否 | 默认为菊花图 | string | loading动图地址或者base64等等 |
| duration | 否 | 500 | number | loading持续时间，当有callback时，无效，默认为回调结束时关闭弹窗 |
| callback | 否 | close() | function | loading回调事件 |
  
example:  
``` javascript
async click() {
  const r = await this.$pupop.loading({
    message: '加载中...',
    duration: 2000,
    callback: () => {
      return this.getAjaxMethod();
    }
  });
}
```
![loading](https://raw.githubusercontent.com/Vitaminaq/vue-pupop-toast/master/picture/loading.png)
##### iframe 参数配置/ params
| key  | require |  default |  type | discribe |  
| :--: | :-----: | :----: | :---: | -------- |  
| url | 是 |        | string | 第三方网页地址 |
  
example:  
``` javascript
click() {
  this.$pupop.iframe({
    url: 'http://xxxx.com'
  });
}
```
##### toast 参数配置/ params
带icon的toast  

| key | require |  default |  type | discribe |  
| :--: | :-----: | :----: | :---: | -------- |  
| message | 是 |        | string | 提示信息 |
| icon | 否 | 默认为'success'/'warn'/'error' | string | 可手动修改图片地址或者base64等等 |
| duration | 否 | 500 | number | toast持续时间 |
  
example:  
``` javascript
async click() {
  this.$pupop.toast({
    message: '请求成功',
    icon: 'success',
    duration: 1000
  });
}
```
![toast1](https://raw.githubusercontent.com/Vitaminaq/vue-pupop-toast/master/picture/toast1.png)
简易式的的一段小字体toast  
example:  
``` javascript
async click() {
  this.$pupop.toast('加载成功', 1000);
}
```
![toast2](https://raw.githubusercontent.com/Vitaminaq/vue-pupop-toast/master/picture/toast2.png)

#### tips
除了toast其余方法都是promise结构，可以拿回callback执行完成后的回调结果，前提是得有return。旨在提供一些js调用的思路，可能有些界面设计的很粗糙，甚至有点不堪入目，你可以fork过去自行修改，哈哈哈。

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