el-dialog-helper

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

el-dialog-helper

★ 10 Open GitHub ↗

Promisify dialogs in Vue!

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# el-dialog-helper ![](https://img.shields.io/badge/license-MIT-F44336.svg)

## 背景

在做业务代码的modal弹窗时，总是围绕visible变量以及控制visible变量逻辑，能否简化弹窗相关逻辑呢？

文章：[Vue Dialog弹窗解决方案](https://lq782655835.github.io/blogs/project/vue-dialog-solution.html)

## Install

``` bash
yarn add @springleo/el-dialog-helper
```

## Online Example

https://lq782655835.github.io/el-dialog-helper

## Quick Start

Import modules and set up settings in main.js:

``` js
import ElDialogHelper from '@springleo/el-dialog-helper'
Vue.use(ElDialogHelper)
```

use `Vue.prototype.$openDialog` in your App.vue

``` js
<template>
  <el-button type="primary" @click="open" size="small">编程式打开dialog</el-button>
</template>

use `Vue.prototype.$closeDialog` in your elementui-dialog.vue:

``` js
<template>
  <el-dialog title="ElementUI Dialog" :visible.sync="visible">
    {{ name }}
    <div>
      <el-button type="primary" @click="$closeDialog(true)">确定</el-button>
      <el-button @click="$closeDialog(false)">取消</el-button>
    </div>
  </el-dialog>
</template>

## API

### 1. Vue.prototype.$openDialog()

使用方式：`this.$openDialog(DialogComponent)(props = {}, parentContext = undefined)`

* DialogComponent： 自定义的弹窗.vue组件

* props：弹窗组件需要传入的初始化props

* parentContext：弹窗的父级上下文，一般用于获取父级 provider， 如获取 ConfigProvider 的配置、$store、$router

返回等待用户弹窗关闭的Promise，当Dialog弹窗组件`$emit('done')`时，resolve promise；当`$emit('cancel')`时，reject promise。

### 2. Vue.prototype.$closeDialog()

使用方式： this.$closeDialog(isSuccess = false, ...args)

全局注入的快捷方法，`是$emit('done')和$emit('cancel')的快捷键`。当isSuccess = true，执行$emit('done');当isSuccess = false时，执行$emit('cancel')。

## Vue plugin series

## License

MIT

el-dialog-helper

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README